If an image is missing from an HTML page, first inspect the image element and the URL the browser actually requests. A wrong relative path, missing deployed file, server error, unsupported format, or cross-origin restriction can all leave you with a broken-image icon or alt text. Open the resolved image URL directly, then use your browser’s Network and Console panels to find where the failure occurs before changing code.
Start with the image element
For a single image resource, HTML uses an <img> element with a src attribute. Check that the element is present in the rendered page and that its source is not empty, misspelled, or otherwise invalid. If you use srcset, check that its candidate URLs point to files that actually exist as well.
<img src="images/photo.jpg" alt="A mountain lake at sunrise">An empty or null source, corrupted image data, or a format the browser cannot display can cause an image-loading error. The alt value is a text replacement for cases where the image cannot be processed; it does not fix the request. If you see the alt text, treat that as evidence to investigate the source and response, not as a remedy.
Check how the browser resolves the image URL
A relative URL is resolved from the HTML document’s URL, not from a mental assumption about the project root. Match the path to the deployed directory structure and check every character, including capitalization and file extension.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
| File location relative to the HTML document | Example source |
|---|---|
| Same directory | photo.jpg |
An images subdirectory |
images/photo.jpg |
Site root’s images directory |
/images/photo.jpg |
The leading slash in the last example means the site root. It is not interchangeable with a path relative to the current document. For example, a page nested several directories deep can resolve images/photo.jpg to a different location than a page at the site root.
- In DevTools, inspect the page’s
<img>element and note the source value. - Resolve that value against the page’s actual URL, accounting for its directory.
- Open the resolved URL in a new tab. If it fails there too, investigate the file or server first. If it works directly but not in the page, compare the page’s request and the direct request.
A filename that differs by even one character—or by capitalization on a case-sensitive server—can point to a missing file. Also verify that the extension matches the actual file rather than merely the name you intended to upload.
Use DevTools to find the failing layer
Opening an image URL directly is a quick check, but the page’s Network request provides better evidence about what the browser received in context. Reload the page with DevTools open, select the image request, and inspect its status, final URL, response headers, and response content or preview. Check the Console for decoding and security messages.
| What you see | Likely area to investigate | Next check |
|---|---|---|
| 404 or another missing-file response | Path, filename, or deployment | Compare the requested URL with the deployed asset location and casing. |
| 403, login page, or unexpected redirect | Access rules, authentication, or server routing | Inspect the final URL and response body; confirm the asset is publicly available to the page. |
| A successful status but HTML in the response | Fallback routing, error handling, or a redirect target | Verify that the response is image data, not an HTML page that happens to have a successful status. |
| Request succeeds but the browser reports a MIME, format, or decoding problem | Response type or file integrity | Confirm the response is the intended image and that the data is not corrupted. |
| CORS message in the Console | Cross-origin configuration | Check the image server’s permission response for the requesting origin. |
A URL that loads something in a tab is not necessarily serving the intended image. It can return an HTML error, a login screen, or another redirect destination. Confirm both the final URL and what the response contains before changing the markup.
Free tools Windows power users keep installed
One-click scans. No signup required.
Confirm the asset is deployed and served as an image
A local file can exist in your development folder while being absent from the deployed site. Check the published asset path, not only the source tree. If the deployment moved the page or changed its base path, a previously correct relative URL may now resolve somewhere else.
- Confirm the image file is included in the build or deployment output.
- Check the exact public URL requested by the page and whether the server returns the image itself.
- Look for redirects, access restrictions, and HTML error or login responses.
- If the response is the intended file but rendering still fails, investigate its format and integrity rather than repeatedly changing the path.
For a simple setup, keeping images on the same server as the page avoids adding a separate origin to diagnose. A content delivery network can be useful for more advanced delivery, but it introduces another place to verify the URL and response configuration.
Check format and file integrity
Even a correctly resolved URL can fail to display if the browser does not support the image format or the image data is damaged. First establish that the response is actually the intended image. Then try a known-good image in the same location or replace the suspect file with a valid export in a browser-supported format.
Do not convert files as the first step when the request returns a 404, an HTML page, or an unexpected redirect: changing the image format will not correct a path or server response. Similarly, if the browser reports a decoding error, replacing or re-exporting the asset is more relevant than editing alt.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsInvestigate CORS only when the image is cross-origin
If the image is served from a different origin and the Console reports a CORS error, inspect the image response headers. When an image request uses the crossorigin attribute, the server must opt in to the requesting origin with an Access-Control-Allow-Origin response header. Without the required permission, the browser blocks the relevant cross-origin image operation.
Check whether the page actually needs crossorigin, and configure the image server to allow the page’s origin when that cross-origin operation is required. Alternatively, serve the asset from an allowed origin. Do not add or remove the attribute at random: use the Console message and response headers to establish whether CORS is the fault.
Keep alt text useful while fixing the image
Write concise descriptive alt text for an image that conveys information. For a decorative image that adds no meaningful content, use alt="". Alt text supports people who cannot process images and situations where image loading is disabled; it is not a repair for a failed URL, a server error, or unsupported image data.
<!-- Meaningful image -->
<img src="images/photo.jpg" alt="A mountain lake at sunrise">
<!-- Decorative image -->
<img src="images/divider.png" alt="">Or skip the browser setup
If you need a rendered screenshot to see what a page looks like, ScreenshotNeo can capture a URL with one request. A screenshot can help confirm what appears visually, but it does not replace checking the Network panel and Console when an image request fails.
For example, this cURL request captures a page as WebP:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Before capture, it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents using Claude, Cursor, or another MCP client. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up free for 1,000 screenshots a month with no card.
Troubleshoot by symptom
The broken-image icon appears
Inspect the request status and final URL first. A missing file points toward the path or deployment; a redirect, access error, or non-image response points toward server behavior. If the response is the intended image, check format support and whether the file can be decoded.
Alt text appears instead of the picture
Keep the alt text in place, then inspect the source and Network request. The browser may be unable to load or process the image; the alt text is the fallback content, not proof that the markup’s path is the only problem.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →The image URL works when opened directly, but not on the page
Compare the exact URL requested by the page with the address that worked directly. Check the document-relative path, final redirect destination, request and response headers, and the browser Console. If the request is cross-origin, establish whether a CORS error is involved.
The image works locally but disappears after deployment
Check that the file made it into the deployed output and that the production page resolves the source to the intended public path. Verify filename casing and the response from the deployed URL; local filesystem paths do not establish that the asset is available at that URL.
The response looks successful but the image remains blank
Inspect the response body and type instead of relying on the status alone. A server can return an HTML fallback or error page. If it is image data, check browser support and data integrity, then consult the Console for a decoding or cross-origin error.
A practical order for fixing the issue
- Confirm the page contains an
<img>with a non-empty, valid source. - Resolve the source from the document URL and verify spelling, capitalization, extension, and directory depth.
- Open the resolved URL directly; then inspect the page’s Network request and Console.
- Confirm the deployed server returns the intended image rather than a redirect, login page, HTML error, or missing-file response.
- Only after the URL and response are correct, investigate unsupported formats or corrupted data.
- If a cross-origin error is reported, check the server’s CORS response and the need for the
crossoriginattribute. - Leave meaningful alt text in place, or use an empty alt value for decorative imagery.
This order separates markup and URL faults from deployment, response, file, and browser-security faults. It prevents an unrelated code change from masking the evidence you need to identify the actual cause.
Recommended Free Tools
Frequently Asked Questions
Does the alt attribute make an image load?
No. It provides fallback text when the image cannot be processed; it does not correct the image request.
Should I use a leading slash in an image path?
Use one when you intend a site-root-relative path such as /images/photo.jpg. Without it, a relative path is resolved from the document’s URL.
Can I fix every missing image by adding CORS headers?
No. CORS is relevant when the browser reports a cross-origin restriction. A missing file, wrong path, HTML response, or unsupported image needs a different fix.
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.
