Member Avatar for tngadgetlady

I am having problems getting my images show up in some of my pages. My instructor and some of the students in my online class have suggested using relative links, but when I do this, NONE of the images show up. Any suggestions?

  • 4 Contributors
  • 3 Replies
  • 120 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by churva_churva

Dani AI

Generated

Good checks from , and — those cover the common path/name issues. The next step is a short, targeted checklist that finds the less obvious causes and gives concrete tests you can run quickly.

Open the browser DevTools (F12) and use the Network panel while reloading the page. Inspect the exact URL the browser requested for each image, the HTTP status code, and the Content-Type. The request URL shown there is the canonical path the browser tried to load; use that information to distinguish client-side path resolution problems from server-side problems (permissions, redirects, rewrite rules).

A few specific things often missed:

  • A page-level <base> tag changes how relative URLs resolve. For example:

    <base href="https://example.com/project/">
<img src="images/pic.png" alt="pic">

    makes the browser request https://example.com/project/images/pic.png. If you meant the site root, use a root-relative path (starts with /) instead.

  • Server-side issues: file permissions, hotlink protection or rewrite rules, and accidentally uploading images in ASCII mode via FTP will break images. Also check for non-ASCII characters or spaces in filenames and try a cache-bust query string (e.g., ?v=2) when troubleshooting.

  • If a request returns 200 but the Content-Type is text/html, the server is returning an error page instead of the image — check server logs or the rewrite rules.

For authoritative reference on how the browser resolves and requests images, see the MDN docs for the HTML image element and the Network Monitor: HTML img element and Network Monitor.

Recommended Answers

All 3 Replies

Member Avatar for hielo

That typically happens when you have the WRONG path to the image and/or you have misspelled the image name. Also, be aware that some webservers are case-sensitive. So if your image name is "logo.gif", then if you code "logo.GIF", it will not work.

So, your first task is to figure out the full path to your image. Type it directly in the browser's address:
http://www.yoursite.com/Images/logo.gif

If it loads, then you have the right path and you should be able to use that path in your image - <img src="http://www.yoursite.com/Images/logo.gif"> Also, if you are viewing your page via http, but your code uses the file protocol - <img src="file:///..."> then it will not work. You must reference the image using http, so you will need to upload the images to webserver.

Member Avatar for nandanbasak

You keep your image in same folder where html file is present and you type
the code for image setting in html page

<img src="sheet79_005.jpg">

or your image, anywhere in the drive set the path correctly like

<img src="file:\\\E:\PICTURE\computer.jpg">
Edited by nandanbasak because: n/a
Member Avatar for churva_churva

well you can also do this thing...copy your picture then paste in the browser then the URL is there then copy it.then paste it in your text editor..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.