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">
Related
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
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>
I added image url in img src tag in my angular application and it is not working. <img class="img-fluid mb-1" src="https://drive.google.com/file/d/1iIwtotpPYKooz7AfsiDEnsoi-WAZBJt1/view">
Is there any different way to give the source for images?
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']"
In this images shows what happen
HTML code is here- In this some of my images showing in webpage and some of is not..how should i fix it
<img src="img/uploadFiles/{{room.imageLocation.split('//')[6]}}/{{room.imageLocation.split('-')[1]}}" alt="Image Loading Failed"/>
Use ng-src instead of src when you are binding images
<img ng-src="img/uploadFiles/{{room.imageLocation.split('//')[6]}}/{{room.imageLocation.split('-')[1]}}" alt="Image Loading Failed"/>
<img src="img/uploadFiles/{{room.imageLocation.split('//')[6]}}/{{room.imageLocation.split('-')[1]}}" alt="Image Loading Failed" onError="this.src='./assets/img/placeholder.png'" />