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.

Make sure, as @William Yang posted, that your image is on the computer that is _hosting_ the website. Pop it into your www folder, and then link to like: "src='j3evn.jpg'" and then you will be good to go. — totallyuneekname, Aug 24 '13 at 01:15
yeh, I have the same issue. Absolute link _http://localhost/path/image.jpg works just fine in browser, but doesn't work within src tag :| — ymakux, Aug 11 '15 at 09:48

score 19 · Accepted Answer · answered Aug 24 '13 at 01:10

19

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!

answered Aug 24 '13 at 01:10

William Yang

759
9
30

So instead of moving the images, I just created a soft link. I assumed that as the browser could access it from outside the hosted directory, it would be fine. – mtfurlan Aug 24 '13 at 01:29
@Scuzzball nope, you have to move them. All resources such as html, css, and javascript has to be located inside your xampp's www directory. – William Yang Aug 24 '13 at 01:31
@Scuzzball Think of it as your xampp www folder is the folder you want to show the world, whereas all other folders on your server / computer are hidden from view. Things are done this way for obvious security reasons. – William Yang Aug 24 '13 at 01:33
Yeah, I understand this, but this is a project that will never see open internet, and I just did it with PHP as that's what I know, and it getting done quickly was important. It really should have been done in something else. – mtfurlan Aug 24 '13 at 21:54

score 7 · Answer 2 · answered Aug 08 '15 at 20:58

7

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

answered Aug 08 '15 at 20:58

user1751104

71
1
1

That was the issue for me !Thanks i was driving me crazy ! – ChathuraG Jul 20 '16 at 19:53
1

This keeps happening to me since I'm working cross platform, deploying to a linux VM. I think I've come to this comment 3 times now. – Murphy4 Aug 12 '16 at 23:57

score 4 · Answer 3 · answered Aug 24 '13 at 01:15

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

score 3 · Answer 4 · answered Sep 01 '16 at 00:57

3

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

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

answered Sep 01 '16 at 00:57

Chris Hayes

11,505
6
33
41

score 3 · Answer 5 · answered Aug 23 '21 at 11:11

3

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.

answered Aug 23 '21 at 11:11

Martin

628
1
9
28

score 2 · Answer 6 · answered Aug 24 '13 at 01:13

2

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.

answered Aug 24 '13 at 01:13

Kevin

348
4
13

score 0 · Answer 7 · answered Nov 01 '20 at 20:45

0

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

answered Nov 01 '20 at 20:45

chandan janrdan

1

score -1 · Answer 8 · edited Sep 20 '18 at 13:08

-1

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.

edited Sep 20 '18 at 13:08

Vineeth Sai

3,389
7
23
34

answered Sep 20 '18 at 11:49

shubham1js

242
3
7

score -1 · Answer 9 · answered Jul 16 '22 at 15:45

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.

score -3 · Answer 10 · edited Nov 04 '19 at 21:00

-3

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.

edited Nov 04 '19 at 21:00

Dharman

30,962
25
85
135

answered Nov 04 '19 at 19:41

Manish Kumar

17
3

1

This answer doesn't seem to associate with the original question, nor does it seem to answer it. – Studocwho Nov 04 '19 at 20:23

HTML Image not displaying, while the src url works

10 Answers10

Linked