I have an image being displayed in my website which runs fine on Safari however when I run this in Firefox, Chrome, and Opera it does not display for me.
The code I have is:
<img class = "header" src="./images/websitelogo.jpg" alt=" Header Image"/>
Has anyone experienced this issue before and if so how did you resolve this?
Thank you very much.
It seems that your path is wrong. If you are working in index file ,and u have another folder with pictures ,there's no reeason for you to have "." and /.
<img class = "header" src="images/websitelogo.jpg" alt=" Header Image"/>
It should look like this.
Have you checked the console log. I think the problem is in the img src you are searching image in ./images/websitelogo.jpg, but the images folder is in the same hierarchy as your html page, So replace your src to images/websitelogo.jpg
<img class = "header" src="images/websitelogo.jpg" alt=" Header Image"/>
Related
I am using external links for some images in my app. Links are ok, anchor tag works and it moves me to the exact raw image. The issue is that src of the image display broken image link icon;/
<img src="#img.Url" loading="lazy" style="max-width: 80%">
Image Original Link
Could someone help me?
When trying to load my image on laravel, the image is loaded in back-end fine. But not showing on the web page.
This is my code:
<figure class="c-card__image c-card__image--arrow c-searchresult__image"style="background-image: url('{{$image}}?{{\Carbon\Carbon::now()->timestamp}}')"></figure>
This is the code in browser:
<figure class="c-card__image c-card__image--arrow c-searchresult__image" style="background-image: url('/vendors/57/horse-11.png?1554287941')"></figure>
In my Console & Network tab (from browser) I can see the image is loaded correctly.. but it's not shown on screen..
In the code above you are not specifying any file type that may be the issue, it should be something like this horse-11.png?1554287941.png or horse-11?1554287941.png.Your $image var should only save the name, that way you can do something like this:
<figure class="c-card__image c-card__image--arrow c-searchresult__image"style="background-image: url('{{$image}}?{{\Carbon\Carbon::now()->timestamp}}'.'png')"></figure>
and the output will be something like this
<figure class="c-card__image c-card__image--arrow c-searchresult__image" style="background-image: url('/vendors/57/horse-11?1554287941.png')"></figure>
Ok. I can't figure this out. Here's the HTML:
<html>
<body>
<img source="sample.jpg" alt="Wheres my image" style="width:100;height:38">
</body>
</html>
Pretty simple. The picture is just a simple block with some text in it. It's 2k in size. And for some reason I can't attach it here.
Both the image and the HTML are in the same sub directory in my Documents folder (Win10 x64 pro).
When I load the HTML, I just get the text from the "alt" setting for the image.
Browsers I'm testing on:
Chrome: 60.0.3112.113 (Official Build) (64-bit);
IE: Version 11.540.15063.0;
Edge: 40.15063.0.0, EdgeHTML version: 15.15063
Any ideas?
Try using this
<img src="sample.jpg" alt="Wheres my image" style="width:100;height:38">
You are using source insted of src that is causing error so change that. I hope this will work.
Change "source=" to "src=" other than that it should work.
Look here for more...
https://www.w3schools.com/html/html_images.asp
In your style add a unit to the width and height like 'px'. Then replace attribute source to src :)
<html>
<body>
<img src="sample.jpg" alt="Wheres my image" style="width:100px;height:38px">
</body>
</html>
The problem is that you have used the attribute source instead of src for your <img> tag.
Rewrite your image tag as:
<img src="sample.jpg" alt="Wheres my image" style="width:100;height:38">
If the image still won't load for you, there are three possible reasons why this may be happening:
You have forgotten to upload the image to the server.Check it's actually accessible by manually navigating to it.
You have referenced the file incorrectly, either by name or by path.
You need to clear your cache.Hold CTRL and click the refresh icon to clear your image cache.
I've composed an email in HTML that has an image in it.
The image "src" attribute has a URL pointing to a controller action endpoint on my server (ASP.Net) which returns a FileContentResult.
An example of the img tag looks like this:
<img src="https://www.mywebsite.com/controller/action?argument=value" width="600" height="300" alt="HeadingImage" title="HeadingImage">
The email displays as expected in Outlook.
If I take the source from Outlook and just view it in Chrome desktop, it still works fine.
If I visit the img URL in Chrome the image is downloaded.
However, if I view the email in Gmail the image does not display. Why might this be the case?
I get a single error in the console looking something like this:
ci6.googleusercontent.com/proxy/<SNIP>https://www.mywebsite.com/controller/action?argument=value GET https://ci6.googleusercontent.com/proxy/<SNIP> 404 ()
Hi you can use this it's work for me
Including the scheme in the src url (using "//" does not work - use full scheme EG: "https://")
Including width and height attributes
Including style="display:block" attribute
Including both alt and title attributes
Just add http:// in image src
<img src="http://www.mywebsite.com/controller/action?argument=value" width="600" height="300" alt="HeadingImage" title="HeadingImage">
First You need to add that image on your deployed project folder and then you need to specify the path of your Image :
<img src="http://www.mywebsite.com/Images/YourImage.png" />
Cheers !!
Im building a webpage and have the following code in the page:
<img alt="chat" href="images/chat.jpg">Chat now
The image "chat.jpg" is in the images folder, which is in the same folder as index.html, and if i browse to "localhost/site/images/chat.jpg" it displays but it doesnt show up in the index page at "localhost/site/index.html".
I have tried changing the href to "/site/images/chat.jpg" and the same thing happens.
There is no href attribute for img elements. You are looking for the src attribute.
Validators are useful tools.
This will work for your problem.
<img alt="chat" src="images/chat.jpg">Chat now