HTML Image not displaying, while the src url works - html

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

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 5

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 6

my problem was not including the ../ before the image name
background-image: url("../image.png");

Answer 7

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

Answer 8

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 9

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