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)
<span class="avatar"><img src="/Users/newuser/Dropbox/MyWebsite/Website/imagesnewselfie.jpg"
alt="" /> </imagespan>
<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>
Change the path on your img tag to point to:
<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:
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.