Why aren't I getting a picture based on this html/css code?

Based on the code in the screenshot below why aren’t I getting a picture in the browser view? I have the code in the left bottom corner and the browser view showing. Let me know if you need more detail for an answer. Thank you.

You seem to be missing the .html file extension.

intro to html.html

Not sure where I’d add it?

In VS Code right-click the file > use the “Rename…” menu option at the bottom > add .html to the file after the file name. You can also select the file and press F2 for the rename option.

You may also have explorer set to not show file extensions. I would turn that on if you have not.

Is the image you want located in that thumbnail folder?

I find that if the image is not in the place you are calling in the tag then it will not work. The image needs to be there and not in another location.

Doesn’t seem to matter what I do I don’t get the picture.

No the image is not shown. I only showed what the text browser was showing me.

when your just starting out, its best to keep everything in one folder, when using things on your computer.
for example:

folder:
index.html
style.css
image1.png

< img src=“image.png” alt=“image description”/ >

Here is quick example in notepad:

if you do want to try other folder arrangements, I found ‘harvards CS50’ course on youtube to be helpful, as well as w3schools.com

folder paths can be provided like this, if you wish to use the same image for several docs:

./image.png = the image is in this folder
…/image.png = the image is in the next folder up (parent folder)

in an html doc it would be displayed as:

< img src=“…/image.png” alt=“image description”/ >

I’m not sure why, but upon deleting the photo and deleting html extension names on the folders the picture now works for me. Glad to be able to move forward.

Thank you, this is a challenging endeavor to undertake.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.