[html] HTML Image not displaying, while the src url works

<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.

This question is related to html image

The answer is


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.


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.


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. :)


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" />

my problem was not including the ../ before the image name

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

change the name of the image folder to img and then use the HTML code


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.