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
Related
I have replaced lazy loading with native chrome loading="lazy" attribute but it seems to be not working. I am using Chrome 76 latest version.
I checked my page speed in https://developers.google.com/speed/pagespeed/insights and it still shows to Defer offscreen images!
Not sure what exactly I have missed?
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
I answered a related question some time ago:
After some research I found that I was missing something on my images. Images should include dimension attributes
As mentioned here: https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
While it's not necessary, it is desired or expected to specify the dimension attributes on your images because without dimensions specified, layout shifts can occur. Resulting in unexpected behavior.
The browser needs to know the dimensions of your images to reserve sufficient space on a page for them.
Related question: https://stackoverflow.com/a/64330480/10757314
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 "./"
:)
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'" />
If I run my webapplication the application work right. When I try to publish with the file system the images doesn't show. The images are included in project and in the publish folder I do find the images in the image folder.
but is does not show. There is no error, so I do not know where I had to look. Does somebody can help me with this? The image is a simple html tag.
<img src="~/Images/logo.png">
You can not mix ~ with non runat="server" control :
But you can do this :
<img src='<%= ResolveUrl("~/Images/logo.png") %>'/>
MVC :
<img src="#Url.Content("~/Images/logo.png" )"
Is it an ASP.NET webform project? If so, update it as follows:
<img src="~/Images/logo.png" runat="server" />
Here are two ways to set up your image. Either one should work for you.
<img src="/Images/logo.png" />
<asp:Image ID="Image1" ImageUrl="~/Images/logo.png" runat="server" />
Here are several small icons on the page that looks the same, but display different information.
Classes message1, message2, .., messageN are used for ajax to display a message (could be the same on the same page, so classes instead of ids are used).
I can create css class .defaultcursor{cursor:default;} to improve the code below. Are there any better idea so the code takes as few space (bytes) as possible with the same functionality?
<img src="help.png" alt="" />
...
<img src="help.png" alt="" />
...
<img src="help.png" alt="" />
...
<img src="help.png" alt="" />
Thank you.