Im trying to load an image from my /public/images folder in laravel. Im getting a 404 not found error. I know the image exists, and vscode even autocompletes the path for me.
here is the img tag:
<img src="/public/images/1616327614.jpg" class="im" alt="...">
and the file path:
I have also tried variations of the img src path, for example:
<img src="./public/images/1616327614.jpg" class="im" alt="...">
<img src="./images/1616327614.jpg" class="im" alt="...">
Any advice here would be greatly appreciated.
Try to do something like this,
<img src="{{asset('images/1616327614.jpg')}}" class="im" alt="...">
Or
<img src="{{public_path('images/1616327614.jpg')}}" class="im" alt="...">
Remember to always check the documentation: https://laravel.com/docs/9.x/helpers#method-public-path
Related
I am building an app using Ruby on Rails and for my user page, I am having trouble generating an image on my site using image tag: <img></img>
Here's the line of code I wrote for pulling out the image:
<img class="card-img-top" src="logo.png" alt="Card image cap">
is logo.png located in root directory or it is in image folder ??
<img class="card-img-top" src="imagefoldername/logo.png" alt="Card image cap">
I'm having trouble understanding how to get images to display on this ASP.net project. I'm used to using tags, but am having trouble with the paths.
I have tried all of these solutions and none cause the image to display:
<img src="~/Images/mask.png" alt="Sample Photo" />
<img src="~/Images/mask.png" alt="Sample Photo" runat="server" />
<img src="../Images/mask.png" alt="Sample Photo" />
<img src="Images/mask.png" alt="Sample Photo" />
<img src="../Images/mask.png" alt="Sample Photo" />
The Images folder is in the project root. I'm using Bootstrap 4.0 and no other CSS.
If I set the src to a link (to Imgur, for example), the image displays. This makes me think it's an issue with the path, but I don't know what it could be. I think I've tried every variation that I came across when googling.
Any guidance would be really appreciated, and please let me know if I need to elaborate.
Place images in wwwroot folder.Details in documentation
Code:
<div class="about-img">
<img src="https://ella.sice.indiana.edu/~macnaust/headshot.jpg" class="img-fluid rounded b-
shadow-a" alt="image not found">
</div>
When I open this as a file in my browser, I see the image just fine. But when I navigate to the published webpage, it is missing, and the alt text does not display either.
What am I doing incorrectly?
Try and remove the tilde and start over. Actually tilde '~' represents home directory. When you place tilde in url, It will access from home directory. So, put the picture in the macnaust/DevFolio/assets/img/ folder then change the src to
<img src="https://ella.sice.indiana.edu/macnaust/headshot.jpg" class="img-fluid
Try this: Change your code to below: If it works, then google up on relative vs absolute folder path.
<div class="about-img">
<img src="/macnaust/headshot.jpg" class="img-fluid rounded b-
shadow-a" alt="image not found">
</div>
Can anyone help me understand why only the second of these following image links would work? I've cleared the cache and every other idea I could think of over the last several hours.
Clearly the image is available in the assets folder since the second one is working.
Any help is appreciated
<div style="float: right;" class="col-sm-4 col-xs-12">
<img src="../assets/images/TherapyRoomOpt.JPG" style="width:100%;" class="img-rounded img-thumbnail img-responsive box-shadow" />
<img src="../assets/images/IMG_1014.JPG" style="width:100%;" class="img-rounded img-thumbnail img-responsive box-shadow" />
<div class='margin-top'>
<app-services></app-services>
</div>
<img src="../assets/images/IMG_1014.jpg" style="width:100%;" class="img-rounded img-thumbnail img-responsive box-shadow" />
</div>
i was facing the same issue, locally it was working but after deploying the images were not showing. Solution is simple.
change : /src/assets/images/yourImage.jpg to
assets/images/commitment.jpg
and re-deploy. All the best.
The issue was that the image links were pointing to the root and since the images that I was building to the subfolder were new, they weren't in the root folder. The fix was to remove one of the periods from the img link
<img src="./assets/images/IMG_1014.JPG"
it looks like it must be case sensitive about the capital .JPG
<img src="../assets/images/IMG_1014.JPG"
vs
<img src="../assets/images/IMG_1014.jpg"
or double check that the path is correct and that the file is on the deployed server where you expect it to be.
Also make sure you dont have "../" confused with "./"
:)
I am working in an Angular project ,In this I am binding the image path from API.
I receive the path from API and trying to display the images in a HTML page .In my case image path inside the src tag is loading well but image path in the ref path is not loading .
Image 1
<div class="row">
<img id="sm001" (mouseenter)="mouseEnter($event)" src="{{smallImages['0']['small_Images']}}" alt="img1" class="img-thumbnail" ref="bigImages['0']['big_Images']">
<img id="sm005" (mouseenter)="mouseEnter($event)" src="{{smallImages['1']['small_Images']}}" alt="img2" class="img-thumbnail" ref="bigImages['1']['big_Images']">
<img id="sm002" (mouseenter)="mouseEnter($event)" src="{{smallImages['2']['small_Images']}}" alt="img3" class="img-thumbnail" ref="bigImages['2']['big_Images']">
<img id="sm003" (mouseenter)="mouseEnter($event)" src="{{smallImages['3']['small_Images']}}" alt="img4" class="img-thumbnail" ref="bigImages['3']['big_Images']">
<img id="sm004" (mouseenter)="mouseEnter($event)" src="{{smallImages['4']['small_Images']}}" alt="img5" class="img-thumbnail" ref="bigImages['4']['big_Images']">
</div>
As in the above code the src tag images are loading but the ref tag images are not loading.
When I put ref="{{bigImages['4']['big_Images']}}" like this the HTML page is not get loaded.
Actually what I am trying is when I hover on the small images (src images ) it will display the big images (ref images).
Please guide me to solve this .
in ref you forgot to add {{ }} :
change
ref="bigImages['0']['big_Images']"
to :
ref="{{bigImages['0']['big_Images']}}"
// OR
[attr.ref]="bigImages['0']['big_Images']" // I would suggest this
This one will might throw error as it not known property of img tag
ref="{{bigImages['0']['big_Images']}}"
So if you want any custom tag to any element , you should do it like
[attr.ref]="bigImages['0']['big_Images']"
Try
[attr.ref]="bigImages['0']['big_Images']"