CODEWITHSUNDEEP
htmlweb
Leslie Tate
Leslie Tate

Reputation: 570

HTML path issues

Im currently making my first website. However, I have encountered problems

with displaying my .jpg image and my resume download PDF. I have quadruple checked

that my paths were right however it seems that they still aren't showing up.

Im using githubs free webhosting, to host my personal site.. (www.kennyellis.me)

My image

<span class="avatar"><img src="/Users/newuser/Dropbox/MyWebsite/Website/imagesnewselfie.jpg" 
alt="" /> </imagespan>

My PDF 

<li><a href= "/Users/newuser/Dropbox/MyWebsite/Website/resume_final.pdf" 
download="resume_final.pdf" class="fa fa-file-pdf-o" aria-hidden="true"></a></li>

Can anyone see anything immediately wrong with my code? I have inspected my jpg

image and my pdf and have directly copied the code into my html file, however, the

pdf download says theres no file and the image isn't displaying.. And yes, I have

tested to make sure I'm using and editing the right html file.. I have written say

"Hello" at the top of my html file and when i pushed it to github, the "Hello"

was displayed at the top of my site.

THANK YOU

Upvotes: 0

Views: 222

Answers (2)

user2182349
user2182349

Reputation: 9782

Change the path on your img tag to point to:

http://kennyellis.me/newselfie.jpg

Like so:

<img src="/newselfie.jpg" alt="My photo">

Do the same with your resume - remove the path.

The paths you have in the question are probably from your local development environment. When you build pages, use relative URLs so that the pages will work after they have been placed on a different server.

For example - if we have a file called my-image:

/var/www/html/example.com/images/my-image.jpg

In the HTML, you could reference it like so:

<img src="/var/www/html/example.com/images/my-image.jpg" alt="My image">

which would be fine if it is always delivered by an HTML page using file:// (not a server).

If you have a server like Apache, you'd use something like:

<img src="images/my-image.jpg" alt="My image">

This tells the browser to look in the images directory under the directory the page loaded from.

If you add a leading slash, such as:

<img src="/images/my-image.jpg" alt="My image">

The browser will start the path from document root, regardless of which directory the page loaded from.

Upvotes: 2

Xrhapsodiex
Xrhapsodiex

Reputation: 1

Could you send the full code of your page?

From what I'm looking at and just a quick observation that the path ways could be wrong, or not uploaded to the server yet. (A common mistake). But would like to see the full page code just in case.

Cheers, Xrhaps

Upvotes: 0

Related Questions