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

Improve this question
2
  • 2
    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. Commented Aug 24, 2013 at 1: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 :| Commented Aug 11, 2015 at 9:48

12 Answers 12

Reset to default
20

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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

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

Improve this answer

2 Comments

That was the issue for me !Thanks i was driving me crazy !
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.
4

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" />
Improve this answer

Comments

1

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.

Improve this answer

Comments

1

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

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

Comments

1

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.

Improve this answer

Comments

-1

The issue is that if the image name inside the <img> tag in HTML contains %20, HTML will convert it to a space ( ) and look for the name with a space instead.

In your case, HTML is attempting to find the image at: file:///C:/Users/Anna/Pictures/Nikon%20Transfer/SEALS%20PROJECT/j3evn.jpg

You can try debugging this on your end, but the easiest solution would be to change the folder name.

Improve this answer

1 Comment

If the problem was that the filename had a literal %20 in it instead of a space (making it a very unusual filename, then the OP's statement that "the src url works" wouldn't be correct.
-2

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.

Improve this answer

Comments

-2

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

Improve this answer

Comments

-2

If you're using React, I had similar issues where relative paths for images didn’t work, but absolute paths did. I found that placing images in the /public folder resolves the problem.

<img src="logo.png"/>
Improve this answer

Comments

-3

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.

Improve this answer

Comments

-5

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.

Improve this answer

1 Comment

This answer doesn't seem to associate with the original question, nor does it seem to answer it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.