How to Fix an HTML Image File Path That Is Not Working

Direct answer: an HTML image appears only when src resolves to the real image URL. Check the exact filename and extension, calculate the path from the document’s base URL, look for a <base href>, then confirm the requested URL and response in browser developer tools. A same-folder image uses photo.jpg; a child-folder image uses images/photo.jpg; a parent-folder image uses ../photo.jpg. Use forward slashes in HTML, including on Windows.

The src value is a URL, not a reference to your computer’s folder layout. Relative URLs are resolved against the document base URL, which is normally the page URL but can be changed by a <base> element. See MDN’s guidance on the <img> element and document base URLs.

1. Check the path against the actual file

Find the image in your project and copy its exact name, including capitalization and extension.
Locate the HTML file containing the image.
Count the directories between that HTML file’s base URL and the image.
Replace Windows backslashes with forward slashes.
Reload the page and inspect the image request in developer tools.

File layout	Correct HTML
`index.html` beside `photo.jpg`	`<img src="photo.jpg" alt="Description of the photo">`
`index.html` beside an `images` folder containing `photo.jpg`	`<img src="images/photo.jpg" alt="Description of the photo">`
`pages/index.html` and `photo.jpg` one directory above	`<img src="../photo.jpg" alt="Description of the photo">`
Image at the site’s URL root, such as `https://example.com/photo.jpg`	`<img src="/photo.jpg" alt="Description of the photo">`

A leading slash means the web server’s root. It does not mean “the folder containing this HTML file.” For a page at https://example.com/docs/index.html, photo.jpg requests https://example.com/docs/photo.jpg, while /photo.jpg requests https://example.com/photo.jpg. MDN’s file-path guide shows these relative path forms.

2. Use a minimal working example

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Image test</title>
  </head>
  <body>
    <img src="images/photo.jpg" alt="A mountain at sunrise">
  </body>
</html>

With this example, the expected layout is:

project/
├── index.html
└── images/
    └── photo.jpg

Open the page through the same server and URL structure you use in production. A file that works when opened directly from disk can resolve differently after deployment.

3. Understand the document base URL

Relative references use the document’s base URL. A <base href> in the document head changes that base for relative links, images, scripts, stylesheets and other resources.

<head>
  <base href="https://example.com/app/">
</head>
<body>
  <img src="images/photo.jpg" alt="Product photo">
</body>

Here the browser requests https://example.com/app/images/photo.jpg, even if the HTML document itself was loaded from another path. Search the head for <base whenever a path looks correct but the request goes somewhere unexpected.

You can see URL resolution directly in JavaScript:

const resolved = new URL("images/photo.jpg", document.baseURI);
console.log(resolved.href);

The URL resolution reference explains how ../, root-relative and absolute references are combined with the base.

4. Inspect the failed request in browser tools

Open developer tools and select the Network panel.
Reload the page with the panel open.
Filter by Img or search for the filename.
Open the request and compare its URL character by character with the deployed file URL.
Check the status code, response headers and response body.
Read the Console panel for mixed-content, permission or decoding errors.

Evidence	Likely cause	Fix
404 Not Found	Wrong folder, spelling or deployment location	Correct `src` or put the file at the requested URL.
403 Forbidden	Server permissions or access rules	Allow the asset to be read by the web server.
200 but broken image	Response is HTML, corrupted bytes or an unsupported format	Open the response, verify the file and serve the correct content.
No request appears	Empty/missing `src`, CSS hiding, or the element was not rendered	Inspect the DOM and ensure `src` or `srcset` is present.
Mixed-content warning	HTTPS page references an HTTP image	Serve the image over HTTPS.

MDN recommends checking spelling and paths in developer tools when diagnosing a site that does not work as expected: site troubleshooting guidance.

5. Fix common filename and format problems

Capitalization: Photo.jpg, photo.jpg and photo.JPG can be different files on a case-sensitive server.
Extension: confirm whether the file is actually .jpg, .jpeg, .png, .gif, .webp or .svg. File managers may hide extensions.
Spaces and special characters: rename assets to simple names such as hero-image.webp, or URL-encode characters correctly.
Unsupported or damaged data: a correct path cannot display a corrupt file or a format the browser cannot decode. Open the file independently and check the response’s Content-Type.
Case-sensitive Git deployments: verify the committed filename and import/path spelling exactly, even if local development runs on a case-insensitive filesystem.

Always provide meaningful alternative text. The alt value gives users a text alternative when the image cannot be displayed and supports accessible pages; see MDN’s HTML images guide.

6. Distinguish local paths from web URLs

Do not use a path from your computer such as C:\Users\Me\Pictures\photo.jpg in a deployed page. Browsers need a URL that the page’s server can return. Put the asset in the site’s public/static directory, then reference its URL.

<!-- Wrong for a deployed site -->
<img src="C:\\Users\\Me\\Pictures\\photo.jpg" alt="...">

<!-- Correct when photo.jpg is in the public folder -->
<img src="/photo.jpg" alt="...">

For remote images, use an absolute HTTPS URL only when you control the delivery or have permission. MDN discusses hosting and hotlinking considerations in its image guidance.

7. Handle responsive images carefully

If the element uses srcset or <picture>, a broken candidate can make the image appear missing even when the fallback path looks valid. Check every URL:

<picture>
  <source srcset="images/photo.avif" type="image/avif">
  <source srcset="images/photo.webp" type="image/webp">
  <img src="images/photo.jpg" alt="A mountain at sunrise">
</picture>

Inspect the actual request selected for the current viewport and browser. Verify that generated asset names exist after your build step and that the server publishes the directory containing them.

8. Check framework and build output paths

Static-site generators and frontend frameworks often copy assets to a public directory or rewrite filenames during a build. The source tree may contain src/assets/photo.jpg, while the browser needs the URL emitted in the build output. Use the URL shown in the Network panel as the source of truth, then check the generated output folder and deployment rules.

Also check:

Whether the image is imported through the framework’s asset system or expected to live in a public folder.
Whether a router serves the page at a nested URL that changes relative resolution.
Whether a CDN or reverse proxy strips or prefixes an asset path.
Whether cache busting changed the filename while HTML still references the old one.

9. Troubleshooting checklist

Is src present and nonempty?
Does the filename match exactly, including case and extension?
Are all separators forward slashes?
Is the image in the same folder, a child folder or a parent folder as the base URL?
Is a <base href> changing the URL?
Does a leading slash point to the intended server root?
Does the requested URL return the image itself rather than an HTML error page?
Is the response accessible over HTTPS and permitted by server rules?
Is the file valid and in a browser-supported format?
Do srcset and <picture> candidates all exist?
Does the deployed build contain the asset at the URL the browser requests?

10. Capture a visual check without setting up a browser

If you need screenshots to verify that an image path works across deployed pages, you can inspect the rendered result with ScreenshotNeo, a website screenshot API and MCP server. Its API returns PNG, JPEG, WebP or PDF from one GET request.

Or skip the browser setup

See the ScreenshotNeo API documentation for all options. A basic capture is:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo removes cookie banners, newsletter popups and chat widgets before capture. Bot checks, blank pages and failed loads are never billed, and response headers identify the page verdict and billing status. Its MCP server lets Claude, Cursor and other MCP clients use take_screenshot, get_page_info and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

11. Performance, reliability and cost notes

Use appropriately sized images and modern formats to reduce transfer time.
Keep paths stable so caches and CDNs can reuse successful responses.
Test the production URL, not only a local file URL.
For automated visual checks, wait for the page’s image request and lazy-loaded content before evaluating the result.
When using ScreenshotNeo, caching with a chosen TTL can avoid repeated captures; failed loads and cache hits are not billed.

Frequently asked questions

Why does `./photo.jpg` fail when `photo.jpg` works?

They usually resolve to the same URL, but a changed base URL, router or build tool can expose differences. Inspect the resolved request rather than relying on the source layout.

Should I use `/images/photo.jpg` or `images/photo.jpg`?

Use the root-relative form only when the file is under the web server’s root path. Use the relative form when the image is under the document’s base directory.

Why does the image work locally but not after deployment?

Deployment may run on a case-sensitive filesystem, publish a different directory, rewrite asset names or serve the page from a different URL depth. Compare the deployed request URL with the deployed files.

Can alt text repair a broken image?

No. It supplies a useful text alternative; it does not correct the URL or file.

What is the fastest diagnostic?

Open the Network panel, reload, copy the failed image request URL and verify that exact URL directly. Its status and response usually identify the problem immediately.