I have an image on my computer that I'm trying to add to my HTML by using
img src="myheadshot.jpeg" (arrows included in VS Code), but nothing shows up. I've been able to add images from Google using the image address, but I can't seem to find a solution to the local image issue.
I'm just beginning my coding journey, so any help is much appreciated!
Make sure your code and image are saved in the same file or location on your computer. (e.g. The code and image are both saved on the desktop or in a file on the desktop.)
Also, maybe try this:
src="myheadshot.jpg"
Not really a difference, but it works for me!
First of all, I wish you success in this journey that you have just started.
For now, you can paste the image into your IDE and use the extension with the name there.enter code here
Example:
Let the name in the file be bg.jpg.
<img src="bg.jpg" >
Related
Is there a way to display a gif in HTML 5?
I've tried this code, and it doesn't work (images work though)
<img src="loading.gif">
I've spent hours trying to find out how to do this, thanks!
The reference to your image is incomplete since your code itself is fine.
Your code reads as: the image is located at http://example.com/loading.gif.
You need to either put the complete url path (https://media.giphy.com/media/jUwpNzg9IcyrK/giphy.gif or use ellipses (../media/giphy.gif) to go back a directory.
<img src="https://media.giphy.com/media/jUwpNzg9IcyrK/giphy.gif">
I am just getting started using HTML and I seem to have fallen at the first hurdle.
I am trying to create a basic webpage containing an image that is downloaded when clicked.
So far I have:
<a href="/images/selfie_img.jpg" download>
<img src="/images/selfie_img.jpg" alt="Selfie" style="width: 300px">
</a>
I expected this to display the image I want as it seems to my eye to be formatted exactly like all the examples I have seen. However, this only displays the alternative title, not the actual image.
I have checked the image path, and used different images to try and solve the problem. I am using VS code and the software can follow the image path to find the appropriate image, but when I load the program, the image is replaced by that annoying blue question mark. Using a URL as the image path seems to work but then the image isn't downloaded when clicked, I just get the URL.
Welcome to StackOverflow, SpicedWater!
The problem you're describing is most likely caused by a wrong path. Your browser resolves the images path and can't find it. I suggest you take a look at the source code in your browser or the developer console's network tab to see what path it's trying to find this image at and which http status code the browser determined.
I am working on Jet and now have to insert a image in the page. It should be very easy but now I am just not able to make this image shown in the page.
To ensure that there is no path error, I put the image and the html file in the same folder: src/js/views.
Below is the html code snippet:
<img src="xxx.png" style="width:89.25pt;height:18.75pt;" alt="xxx logo">
But the page just shows a broken icon but not this image.
Could you please help me out? Thanks in advance!
Two possible solutions:
Go to your browser's Dev Tools -> Network, and search for your image's request to server (If you cannot find it reload the page while keeping the Dev Tools open.) Does the URL path to the image look correct to you? If not, correct it.
If it still isn't working try using <image> tag instead. This worked for me.
first time poster and html noob here.
For a few hours now ive been trying to use a background picture. I downloaded an image I wanted to use, and set about trying to code it.
No matter what I tried, the image would not display. However, when I tried one of the other images I was using, it displayed just fine.
I tried using just the first letter of the existing image, and the program immediately suggested the image in a dropdown, as well as several other images with names starting with the same letter. However when I tried to use the new images first letter, it did list options, but none of them were the image I had downloaded.
I tried renaming the image, but still no luck.
I havnt included any code just yet, since this seems to not be related to the code itself (Since other images display just fine). Has anyone run into something like this before? Extensive google searches did not yeild anything for me.
In case it matters, I am specifying the background image as part of the Body css.
Thanks in advance for any help.
Please check to ensure your preferred image is located in the same parent folder as your htlm.
As #Patrick Falvey says but if the picture is not in the same folder remeber to / before your file path :)
I try to view an htm page locally (on my laptop) in IE 10 and none of the images appear. However, if I go to the image url itself, it shows fine. For example, if I go to the URL "C:\Users\Angie\Desktop\pdb\ROTE - Main Menu.htm", images like this:
<IMG SRC="graphics/LogoSm2.gif" STYLE="Margin-top: 0pt; margin-bottom: 0pt" width="71" height="67">
do not show, but if I go directly to the image, "C:\Users\Angie\Desktop\pdb\graphics\LogoSm2.gif", it shows.
Can anyone help please?
Edit: RESOLVED. FIGURED IT OUT! It was a stupid oversight on my part. The file had a .htm extension from where I copied it, but I had to change it to .html to view locally. :-P It works with the original relative links. Thanks everyone who tried to help.
You're using a relative path, which means the server checks from the directory it is in. You could traverse all the way to the file, but that's not really recommended. Add the image into your web-app/images directory and grab it that way.
This site may help regarding some resource resolution, although it's a little unclear from your question which server/language you're using.
Try changing it to
src="/graphics/LogoSm2.gif"