If an HTML image is missing, the usual fix is to correct the URL in the src attribute. Start with the image’s exact filename, then make the path relative to the page’s base URL: use photo.jpg for the same folder, images/photo.jpg for a child folder, or ../photo.jpg for a parent folder. If it still fails, inspect the browser’s requested image URL and check for a <base href>, a deployment-path change, or a damaged or unsupported image.
Use the correct path for where the files are served
An <img> element needs a nonempty src (or an appropriate srcset) to identify an image resource. The value is a URL, not a file-system instruction. Relative URLs are resolved against the document’s base URL. Without a <base> element, that base normally comes from the page URL; a <base href> changes it for every relative URL on the page. See MDN’s <img> reference and <base> reference.
| File arrangement | src value |
Example |
|---|---|---|
| Image beside the HTML file | photo.jpg |
<img src="photo.jpg" alt="Description of the photo"> |
Image in a child folder named images |
images/photo.jpg |
<img src="images/photo.jpg" alt="Description of the photo"> |
| Image one directory above the HTML file | ../photo.jpg |
<img src="../photo.jpg" alt="Description of the photo"> |
| Image two directories above | ../../photo.jpg |
Use one ../ for each level up. |
| Path from the website root | /images/photo.jpg |
Starts at the server’s root, not beside the HTML file. |
HTML paths use forward slashes, including when you develop on Windows. The relative-path examples in MDN’s file-path guide show the same pattern.
Repair a broken image step by step
- Find the real asset. Locate the image in your project and copy its exact directory name, filename, capitalization, and extension.
Photo.JPG,photo.jpg, andphoto.jpegare different names on many web servers. - Open the page that contains the image. Confirm which HTML document is actually being served, rather than relying only on the folder shown in your editor.
- Write the path from that page’s base. Use the table above. For example:
<img src="images/photo.jpg" alt="A mountain at sunrise"> - Check for a base element. Search the document’s
<head>for<base href="...">. If present, resolve the image URL from that value, not from the apparent source-file folder. - Reload and inspect the request. Open developer tools, use the Network panel, reload the page, and select the failed image request. Compare the requested URL character by character with the location where the file is published.
- Validate the resource. Open the requested image URL directly. Confirm that the file exists, is not corrupted, and uses a format the browser can display.
- Keep useful alternative text. Replace a placeholder such as
alt="image"with a concise description. Meaningfulalttext remains useful when the image cannot load and for people using assistive technology. MDN explains the role ofaltin its HTML images guide.
Understand why a path that looks right can fail
The source file location is not always the page URL
URL resolution happens after the page is served. A local project might contain pages/index.html and images/photo.jpg, making ../images/photo.jpg correct. If a host publishes that page at a different URL, the browser may request a different path. Always diagnose the URL shown in the Network panel, then align the deployed directories or change src. MDN’s explanation of resolving relative references demonstrates this rule.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
A leading slash means site root
/images/photo.jpg begins at the web server’s root. It is appropriate only when the image really is available at that site-root URL. It is not shorthand for “the folder containing this HTML file.” On a site hosted under a subpath, such as a project URL, a root-relative path can point outside the project.
A base element can redirect every relative image
For example, with <base href="https://example.com/app/">, src="photo.jpg" resolves under https://example.com/app/, regardless of where the HTML source file is stored. Remove an unintended base element or adjust its value; otherwise fix each relative path against the declared base.
File names and extensions must match exactly
- Check spelling, hyphens, underscores, spaces, and every letter’s case.
- Check the real extension. Renaming a file to
.jpgdoes not convert a PNG into a JPEG. - Check directory names as well as the final filename.
- Use URL-safe names where possible; if a name contains spaces or special characters, ensure the published URL encodes them correctly.
Backslashes are not HTML URL separators
Write images/photo.jpg, never imagesphoto.jpg. This remains true when the project is stored on Windows. Forward slashes are the portable HTML form.
Use developer tools to identify the failing URL
- Open the page in the browser and press the developer-tools shortcut, then choose Network.
- Reload with the panel open. Filter for “Img” or search for the filename.
- Select the failed request and read its full request URL. A missing segment, wrong case, or unexpected base directory usually becomes obvious here.
- Open that URL in a new tab. If it also fails, the deployed file location or file itself is the problem. If it opens directly, inspect the page’s base URL, markup, and any generated HTML.
- Check the Console for related errors, then correct the source or move the asset to the location the request expects.
MDN’s site-checking guide recommends this kind of spelling and developer-tool verification.
Recommended Free Tools
Examples you can copy
Same directory
<!-- index.html and photo.jpg are beside each other -->
<img src="photo.jpg" alt="A red bicycle">Child directory
<!-- index.html is beside an images folder -->
<img src="images/photo.jpg" alt="A red bicycle">Parent directory
<!-- pages/index.html; photo.jpg is one level above pages -->
<img src="../photo.jpg" alt="A red bicycle">Root-relative and absolute URLs
<img src="/images/photo.jpg" alt="A red bicycle">
<img src="https://cdn.example.com/photo.jpg" alt="A red bicycle">An absolute URL can be useful for a controlled image host. For a site’s own content, hosting the image yourself or using a delivery setup you control is safer. MDN’s HTML images guidance cautions against linking to another site’s image without permission (hotlinking).
When the path is correct but the image still does not render
The file is missing or deployed elsewhere
Compare the URL from Network tools with the production directory listing or deployment artifact. A file present in your editor may have been excluded from the build, given a different case, or copied to another public folder.
The resource is damaged or unsupported
Try opening the file locally and in the browser. Re-export a corrupted image and use a browser-supported image format. A valid path cannot repair an unreadable resource; MDN lists corrupted and unsupported images among image-loading failures.
The markup has no usable source
Inspect the final HTML, especially when a framework or template generates it. An empty src, a misspelled attribute, or a value overwritten by script leaves the browser without an image URL. Confirm the rendered element contains the intended value.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsA cache hides your change
After correcting a path, reload the page and, if necessary, perform a hard reload or clear the development cache. Then verify that the new request URL, rather than an old one, appears in Network tools.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Development and deployment checklist
| Check | Local development | Hosted page |
|---|---|---|
| Base | Determine the URL produced by your local server; do not assume the editor’s folder is the base. | Use the final page URL and inspect any <base href>. |
| Directories | Confirm the image is inside the server’s public/static directory. | Confirm the deployment includes the image at the requested URL. |
| Spelling and case | Match the file name exactly. | Match the case required by the host’s file system. |
| Request evidence | Use Network tools after each path change. | Compare the failing request with the production URL, not a local path. |
Or skip the browser setup
If your actual goal is to obtain a clean screenshot of a page rather than debug your own image markup, ScreenshotNeo can return a PNG, JPEG, WebP, or PDF from one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response reports the page verdict and billing result in headers.
Use the API documentation at https://screenshotneo.com/docs/. The following request captures Stripe; replace the URL with the page you need.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport 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 also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. Every feature is available on every plan; 1,000 screenshots per month are free without a card, and paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
Prevent future path failures
- Keep images in one documented public/static directory and use a consistent naming convention.
- Prefer lowercase filenames without spaces so links behave consistently across hosts.
- Test the page through the same kind of local server used by deployment, rather than relying only on a
file://tab. - Include descriptive
alttext in the original markup. - After moving a page or adding a base element, re-check every relative image URL.
- Make a production smoke test that opens key pages and verifies their image requests.
Frequently Asked Questions
Does changing the image’s width or height fix a broken path?
No. CSS dimensions affect display after the browser has fetched the resource; they do not change the URL in src.
Best Value
Should I put a complete URL in every src?
Not necessarily. Relative URLs are usually easier to move with a site. Use an absolute URL only when the image is intentionally served from a stable, controlled host.
Why does the image work on my computer but not after upload?
The hosted page may have a different base URL, directory depth, filename case, or deployment output. Inspect the hosted request URL instead of assuming the local arrangement carried over.
What does useful alt text look like?
Describe the image’s purpose or meaningful content briefly, such as “Red bicycle leaning against a brick wall.” Do not repeat surrounding text or use a generic “image” label.
Free tools Windows power users keep installed
One-click scans. No signup required.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
