Img tag doesn’t find the image


Hey, Guys.
Could you please help me to understand why this code doesn’t work?
I’ll leave two photos down bellow to observe.
Thank you so much in advance.

If you’re trying to do a webpage that’s online, the src can’t be a location on your computer - it has to be a location online [on the internet].

I’ve heard we can also choose a local image from our files. It’s also a way. For example the company’s logo can’t be found on the internet so I have to the local image.

If this relates to an exercise, the image file path should be given in the narrative/instructions. It is not possible to interface local machine images with this platform.

No, I code in Atom, not this platform.

It could be because the image element isn’t a self closing tag? I used this for my images on a local file and it worked just fine.

Image example

image element is a self closing tag))

Well the only other thing I can think of is to make sure that the internal files you are using are stored under the same file as the index document that you are using for your code. I use Visual Studio Code and that was a problem I was running into at the beginning.

Image Filing

image tag site:whatwg.org - Google Search

In order to understand how and why a browser might know how to deal wtih, <image/> tags we need to remember that we can create HTML elements on the fly, though it is not encouraged.

 <p><image src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg"></image></p>

works because the browser has recognized the src attribute and is content to allow the element to have said attribute, however pseudo it might be (the image element) in terms of recommendation based markup. It (the browser) is more focused upon the EXIF header than the unknown tagname. Given a valid object to satisfy its purpose, down it comes, and nobody is the wiser.

https://www.codecademy.com/workspaces/63846c75263c76afb442e4bd

The misnomer here is the closing tag. Images are not content, but references to content. They don’t need a container object, just a void element to fulfill their role.

The way to prove that this element does not exist in the HTML namespace, try,

image {
  width: 50%;
  border: red;
}

Nothing happens, right? Like we said, the browser was more focused on the src attribute than recognizing the pseudo element.

So we need a polyfill that will make that element recognizable. How’s your scripting and HTML deep understanding?

Note that in the third example on the page above, picture is not even given image status. That should be telling. We need to go down this road some more to really get an explanation why <image/> works, as much as it does.

1 Like

@arc9071354062, you need to make sure you’re selecting the correct path syntax correctly add your img to your index.html root directory, after try this:

./Download/iris.png

1 Like

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