CODEWITHSUNDEEP
htmljava-ee-8
Shawn
Shawn

Reputation: 1

Image in HTML file refusing to display

Before I begin, I have received so much help from this forum over the years, so thanks!

Trying to add an image to an HTML file. I'm working on HTML and J2EE. Total newcomer to web programming.

I started putting the entire path for the .jpg file (macintosh hd/Users/myDir/Desktop.image.jpg) into the HTML file.

When that failed, I began peeling off path elements. Replacing "macintosh hd," the above became "../Users/myDir/Desktop.image.jpg" then, "./Users/myDir/Desktop.image.jpg", then "/Users/myDir/Desktop.image.jpg" and, finally, "Users/myDir/Desktop.image.jpg".

When all those failed, I moved on to replacing "Users" with "../myDir/Desktop.image.jpg", "./myDir/Desktop.image.jpg", and so on until all I was left with was "image.jpg".

Failing at all the above, I made a local copy of the image in the same dir as my HTMl file (webapp). Starting at "image.jpg" I reversed my process above, adding and running, until I was back to macintosh hd/Users.../webapp/image.jpg"

<img class="fit-picture" src="macintosh hd/Users/myDir/Desktop/My Library/workspaces/EclipseEE-Workspaces/TestDir /TestProject/src/main/webapp/image.jpg" alt="should be seeing my image">

The alt statement is showing up just fine, but I'd really rather the image make an appearance. I'd have thought, at some point, the path would match requirements by persistence and/or dumb luck.

Clearly I'm confuzzled by something. I welcome and and all suggestions. Thanks.

Upvotes: -1

Views: 35

Answers (1)

Porzio Jonathan
Porzio Jonathan

Reputation: 563

You should consider the path relative to the file on which you are looking for the picture in the public repository from which you are serving your html page.

Let's take this arborescence

src/
 - index.html
 assets/
   - image1.jpg

Then path to your image will be ./assets/image1.jpg

<img class="fit-picture" src="./assets/image1.jpg" alt="should be seeing my image">

In another case

src/
 - image1.jpg
 anyfolder/
   - index.html

Then path to your image will be ../image1.jpg

<img class="fit-picture" src="../image1.jpg" alt="should be seeing my image">

And in the same dir

src/
 - image1.jpg
 - index.html

Then path to your image will be ./image1.jpg

<img class="fit-picture" src="./image1.jpg" alt="should be seeing my image">

Upvotes: 2

Related Questions