Images won't load under any circumstances in HTML

My images won’t load no matter what I do or how I source them. I have even copy pasted straight from the web into boiler plate templates and it still won’t load.

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>
<img src="https://en.wikipedia.org/wiki/Sports_car#/media/File:2015_Mazda_MX-5_ND_2.0_SKYACTIV-G_160_i-ELOOP_Rubinrot-Metallic_Vorderansicht.jpg" alt="Car" width="500" height="333"/>

This is a file path that links to the Wikipedia media player. That won’t work.
Copy the file path, paste it in the browser’s address bar and close the image. That leads you to the Wikipedia page with a download link for the image. First read the information about reusing it in order to see it you may use it for your purposes.
If you may, download the image and upload it to a webspace you have access to or – if you want to use the image locally – store it on your computer. Then use the file path to that space.

1 Like

Thank you!

On a side note, I’ve been having issues with VS Studio Code setting up internal image links on my pc, but then they don’t work. The only work around I have found is to copy the full file path. Is there something I need to add to VS?

This does not work, although that’s what I get from VS from the pop up folder selection options:
src="/Dasmoto/Images/hacksaw.webp

Only if I c/p the full path will it work:
src=“C:\Users\doliv\Desktop\Programing\Dasmoto\Images\hacksaw.webp” alt=“brushes”

Use relative paths. The usual setup would be having an assets or images folder in the same directory where your html file is located. If your folder name is images, your path would be ‘./images/imagename.jpg’.
VSCode doesn’t have to be configured for that.

Ok, sorry I’m not getting it-

I now put this, though it still does not work:
src="./Images/frames.webp"

the full path for this image is
“C:\Users\doliv\Desktop\Programing\Dasmoto\Images\frames.webp”

and the full path for my HTML file location is:
“C:\Users\doliv\Desktop\Programing\Dasmoto\HTML\Index Dasmoto.html”

Meaning I have a folder named Dasmoto, containing a folder for HTML, and another folder for images. Is there a different way to reference it? Or should I have put the HTML in the Dasmoto root folder instead of putting it in an additional folder?

For the filepath I meant, your folder structure needs to be like this:
“C:\Users\doliv\Desktop\Programing\Dasmoto\Images\frames.webp”
“C:\Users\doliv\Desktop\Programing\Dasmoto\Dasmoto.html”

For the folder structure you have the file path needs to be '../Images/frames.webp' (two dots for one level up).
It’s common practice to use lower case names for folder and file names.

Thank you. I was not aware of the two dot function.

1 Like

Your doc type isn’t set to html from that code snippet. And hopefully your image reference is in the body and not in the head. Why don’t you just download an image and reference it locally rather than from Wikipedia?