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
Related
I am learning Blazor and at the moment I am trying to set an image as the background. I thought I would try display it first as the background-image css didnt work. I have attached a picture of my index.razor page and the img tag i am using is as follows:
<img src="file:///C:/Development/CsharpApplications/Portal/AlbertBartlettPortal/AlbertBartlettPortal/Pages/hero-range-1.jpg" alt="Background Image" />
It allows me to ctrl+click the file path and opens the image right away so it can see the image, but it wont display at all when the website is ran.
HELP!
Page Image Here
I put it in wwwroot\images and then used src="images/aaa.jg". No leading / OR ~/
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?
I have a simple html page :
#my_svg{
width: 75px;
height: auto
}
<a href="#">
<div id="my_svg">
<img src="https://svgshare.com/i/MHB.svg" alt="English flag">
</div>
</a>
All I see is English flag so it seems like my svg is not loading. I'm sure about the path because I have the image as png on the same folder and it's working well. Just changing the extension.
The weird part is that I don't have any 404 error in my console. It's working when I add it throught the link https://svgshare.com/i/MHB.svg but when I use the local file it doesn't work. On my side I don't have any webserver and don't want
So your problem is its not working on the local file right? I think it will work if you use <img src="./flag.svg" alt="English Flag'>. That should work, sometimes not adding "./" on the src attribute will have issues because the browser might think it is a web link, not a path link.
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 found a photo in www.w3schools.com. In that server i can access it by using simple html tag. It's src = "smiley.gif". I want to access the photo in www.practiseboard.com. I have no clue how to do that. Please help.
Right click on the image and copy it URL:
Chrome: Copy image URL
Safari: Copy image address
Firefox: Copy image location
Then use that URL in your img tag.
<img src="http://www.w3schools.com/tags/smiley.gif" alt="Smile">
Demo: https://jsfiddle.net/4v1az6rx/
Use full URL and dont forget http://
if the target site prevents hotlink, you can not display it inside your website.
<img src="http://www.practiseboard.com/smiley.gif">
May be this is what you are looking for!
<img src="http://www.w3schools.com/html/pic_mountain.jpg"; alt="W3Schools.com" />
demo : http://www.practiceboard.com/4fbfc9fc
replace src with full url of the image as Ali said!