My Image Correctly Displays when I View my HTML Document as a File on my Computer but not when I Publish the Site

Question

Code:

<div class="about-img">
      <img src="https://ella.sice.indiana.edu/~macnaust/headshot.jpg" class="img-fluid rounded b- 
      shadow-a" alt="image not found">
</div>

When I open this as a file in my browser, I see the image just fine. But when I navigate to the published webpage, it is missing, and the alt text does not display either.

What am I doing incorrectly?

Answer 1

Try and remove the tilde and start over. Actually tilde '~' represents home directory. When you place tilde in url, It will access from home directory. So, put the picture in the macnaust/DevFolio/assets/img/ folder then change the src to

  <img src="https://ella.sice.indiana.edu/macnaust/headshot.jpg" class="img-fluid 

Answer 2

Try this: Change your code to below: If it works, then google up on relative vs absolute folder path.

 <div class="about-img">
       <img src="/macnaust/headshot.jpg" class="img-fluid            rounded b- 
  shadow-a" alt="image not found">
 </div>