why isn't my image showing up in html?

Question

I'm trying to add an image to my html page. It should be fairly simple. However, the image refuses to show up.

here is the html

        <img src="/images/eiffel.jpg" alt="eiffel">

In safari all i get is a question mark. In chrome it is just an icon with the alt. That is the directory where the image is and my IDE autocompletes the photo name so I know i'm in the right place. So why isn't it showing up??

Answer 1

如果您的图片文件夹位于网页上方的文件夹中，则在其后添加2个点将起作用。

<img src="../images/eiffel.jpg" alt="eiffel">

Answer 2

What is the url of the page where the image should show? Remember that by using the slash you are calling base url. Maybe you could use full url or remove the slash at the beginning.

Also you can try previous answer of adding a "." before the slash.

Hope it helps.

Answer 3

The leading slash in your src URL makes the path relative to the root of your website, it is an absolute path.

Without the slash, this path becomes relative to the HTML document's location. If this document is not at the website root (eg: www.example.com/index.html ) then it will not point to the same location as the first example.

For example, if your page URL is www.example.com/mysite/content/index.html then the two variations will be interpreted as follows:

src="images/eiffel.jpg"       -->  www.example.com/mysite/content/images/eiffel.jpg
src="/images/eiffel.jpg"      -->  www.example.com/images/eiffel.jpg

Using dots as mentioned by other answers would produce subtly different results:

src="./images/eiffel.jpg"     -->  www.example.com/mysite/content/images/eiffel.jpg
src="../images/eiffel.jpg"    -->  www.example.com/mysite/images/eiffel.jpg
src="../../images/eiffel.jpg" -->  www.example.com/images/eiffel.jpg

Answer 4

Check the below Steps which will help you on image rendering issues.

1. Right Click and Choose Inspect Element
2. Click Network Tab Search for your Filename
3. Double click your image file name.
4. It will open in your Safari browser.
5. Verify your image absolute path.

You can follow the same trick for every browser.

Answer 5

Try this because in my code i added the code like this and it worked. My code is img src="C:\\Users\\User\\Desktop\\HTML Programs\\Proj\\bgimg4.jpg"

You can use img src="\images\eiffel.jpg" alt="eiffel" use Markdown in here.
Please keep the above one in angular braces.