HTML Image not displaying, while the src url works

Question

<img class="sealImage" alt="Image of Seal" src="file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg">

That doesn't display an image, just the alt. But if I go to

file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg

in a browser, the image displays.

I'm hosting this on xampp, on a windows machine right now.

I've tried different browsers, and with and without %20 for space, but I know that with is the correct way.(It worked with both, actually)

And I know the images will only be visible on the machine that's hosting it, that's not a problem.

Answer 1

Your file needs to be located inside your www directory. For example, if you're using wamp server on Windows, j3evn.jpg should be located,

C:/wamp/www/img/j3evn.jpg

and you can access it in html via

<img class="sealImage" alt="Image of Seal" src="../img/j3evn.jpg">

Look for the www, public_html, or html folder belonging to your web server. Place all your files and resources inside that folder.

Hope this helps!

Answer 2

My images were not getting displayed even after putting them in the correct folder, problem was they did not have the right permission, I changed the permission to read write execute. I used chmod 777 image.png. All worked then, images were getting displayed. :)

Answer 3

It wont work since you use URL link with "file://". Instead you should match your directory to your HTML file, for example:

Lets say my file placed in:

C:/myuser/project/file.html

And my wanted image is in:

C:/myuser/project2/image.png

All I have to do is matching the directory this way:

<img src="../project2/image.png" />

Answer 4

You can try just putting the image in the source directory. You'd link it by replacing the file path with src="../imagenamehere.fileextension In your case, j3evn.jpg.

Answer 5

我的问题不包括图像名称之前的 ../

background-image: url("../image.png");

Answer 6

My problem was that I had / in front of the path (assets is a dir), such as:

<img src="assets/images/logo.png>" is correct one, while

<img src="/assets/images/logo.png>" returns an error.

Answer 7

将图像文件夹的名称更改为 img ，然后使用 HTML 代码

Answer 8

Not a direct answer to this particular question. But in case, you are giving the image address correctly like this,and wondering why you don't see the image in the output,

<img src ="../../../public/image.jpg"/> 

Directly give the image name like ,

<img src="image.jpg"/>

Or if you have a folder inside public , like say icons , give it like

<img src="/icons/logo.jpg"/>

This is because, React already expects you to have all your images inside public folder. So you don't need to explictly give it.

Answer 9

The simple solution is:

1.keep the image file and HTML file in the same folder.

2.code: <img src="Desert.png"> // your image name.

3.keep the folder in D drive.

Keeping the folder on the desktop(which is c drive) you can face the issue of permission.

Answer 10

In your angular.json folder structure should be like this

"assets": [             
  "src/assets",
  "src/favicon.ico"
],

not this

"assets": [     
  "src/favicon.ico",
  "src/assets",
],

This solved my problem.