Member Avatar for IAmLegend21

I am having a problem in displaying image to the web browser using html. I can only make it when the image and the html file is in the same folder. Is there a way to display an image getting it from the different folder of my hard drive?

  • 2 Contributors
  • 2 Replies
  • 97 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by IAmLegend21

Dani AI

Generated

Clarification and practical tips for (and thanks to for the nudge).

Whether an image in a different folder will display depends on how the HTML page is being delivered. A page opened from disk (file://) can reference other local files with a file URL or relative path. A page served by a web server (http:// or https://) makes the browser request the image from that server, so the image must be reachable via an HTTP URL or be inside a folder the server exposes.

Examples:

<!-- local file URL (works only when the page is opened from disk) -->
<img src="file:///C:/Users/Me/Pictures/photo.jpg" alt="photo">

<!-- server-relative URL (works when the file is served by the web server) -->
<img src="/images/photo.jpg" alt="photo">

Quick troubleshooting checklist:

  • Check the browser DevTools Network/Console for 404, 403 or "Not allowed to load local resource" errors.
  • Confirm path syntax: use forward slashes and URL-encode spaces (%20). File names are case-sensitive on many servers.
  • If the page is served over HTTP, a file:// URL will usually be blocked for security — host the image under the web root or create a virtual directory.
  • For local testing, run a simple local server (for example, python -m http.server) and open the page over to avoid file-scheme restrictions.

ASP.NET notes: put images inside the web application or configure an IIS virtual directory; use ~/ virtual paths in controls or ResolveUrl/Server.MapPath on the server side so paths map correctly to the deployed app. For HTML <img> specifics see the MDN reference and for a quick local server see Python's http.server docs: MDN: img element and Python http.server docs.

Recommended Answers

All 2 Replies

Member Avatar for tarunkhatri

Just give the complete source path of the image you want to show.

Member Avatar for IAmLegend21

Thanks.. I found out the solution before the answer but also thank you for your response. Really appreciated.

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.