Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
If an HTML image is missing, first check the final <img> element and the exact image request in your browser’s Network panel. Then identify which layer failed: URL or delivery, image decoding, CSS/layout, responsive source selection, lazy loading, or cross-origin policy. A successful HTTP status alone does not prove that the browser received a renderable image.
Start with the rendered element and the actual request
A page template can look correct while the browser receives different markup after a framework renders it, a script changes it, or a deployment rewrites paths. Inspect the live page rather than assuming the source file is the final result.
- Open DevTools and select the image in the Elements panel. Confirm the element is an
<img>, and inspect its finalsrcandsrcsetattributes. At least one must provide a usable image URL. - In the Console, evaluate
$0.currentSrcafter selecting the image in Elements. This shows the source the browser actually selected; it can differ fromsrcwhen responsive markup is used. - In Network, filter for images, reload the page, and inspect the image request. Open or copy the exact Request URL. Check its status, redirects, response headers, and response body or preview.
- Check the Console for decode errors, Content Security Policy (CSP) violations, mixed-content warnings, or CORS errors.
- In Elements and Computed, inspect the image’s dimensions and visibility, then inspect its parent elements for clipping, hiding, or overlays.
This sequence separates a missing request from a request that returns unusable content and from an image that loaded but cannot be seen.
Recommended Free Tools
Fix an empty, malformed, or incorrect image URL
HTML and image files are separate resources: the browser fetches the document and then makes a separate request for each image. A page can render normally even when an image request fails. MDN’s <img> reference describes the element and its source attributes.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Check the final source value
Look for an empty src, a value that became null or undefined, a typo, a malformed URL, or a source that points back to the current page rather than to an image. A browser may make a request for an unintended URL or fail to display an image when the source is empty or invalid.
For example, this markup has a usable source:
<img src="/images/team-photo.webp" alt="The project team" width="800" height="533">
By contrast, a templating expression that renders as <img src=""> has not supplied an image URL. Fix the data or template that produced the empty value; hiding the broken-image icon with CSS does not fix the missing resource.
Resolve relative paths against the deployed page
A relative URL is resolved from the document’s URL and any applicable <base> element, not from the folder where you happen to keep your source code. For example, images/photo.jpg requested from /products/item/ may resolve under /products/item/images/. If the asset is at the site root, a root-relative path such as /images/photo.jpg may be appropriate. Confirm the resulting request URL in Network before changing the markup.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute- Check the deployed asset path, not just the development-server path. Build tools and hosting platforms may publish assets under a prefix or different directory.
- Match filename capitalization exactly. A path that appears to work on a case-insensitive local filesystem can fail on a case-sensitive production host.
- Encode spaces and other special characters correctly in URLs. Prefer stable, simple asset filenames.
- Check for a redirect to a login page, an expired signed URL, or a server rule that denies access. A URL can be syntactically valid but inaccessible to the browser.
Read the response: status, headers, and image bytes
A successful HTTP response is not enough. The response body must contain decodable image data in a format the browser supports. A server can return status 200 with an HTML error page, JSON, or corrupt bytes instead of an image.
- 404: the requested path was not found. Correct the URL or ensure the build and deployment publish the asset there.
- 403: access was denied. Check permissions, hotlink protection, authentication, signed-link expiry, and server rules.
- Redirect loop or unexpected redirect: inspect each redirect target. Resolve scheme, hostname, authentication, or routing rules so the final response is the image resource.
- Success status but HTML or JSON response: the server or proxy may be returning an error page or API response. Inspect the response body and content type, then fix routing or authorization.
- Success status but broken preview or decode error: the bytes may be truncated or corrupt, the file may have incorrect metadata, or the format may not be supported in the target browser. Regenerate or convert the image to a supported format and verify the deployed file.
The Network response and browser Console provide different clues: the first shows what was delivered, while the second may report that the browser could not decode or use it.
Check CSS, layout, and overlapping elements
An image may load correctly and still appear absent because it has no visible box, is hidden, is clipped, or sits behind another element. If Network shows a successful image request, inspect Computed styles and the box model rather than repeatedly changing the URL.
display: noneremoves the element from layout;visibility: hiddenhides it while retaining space;opacity: 0makes it transparent.- A width or height of zero, a collapsed parent, or an unexpected flex/grid constraint can leave no visible image area.
overflow: hidden, clipping, transforms, masks, or positioning can move or cut off the image.- A sibling or positioned element with a higher stacking order can cover it. Check stacking contexts as well as
z-index. - A hidden parent can make the image invisible even when the image’s own computed styles look normal.
As a temporary diagnostic, add a visible outline to the image and, if needed, its parent: img { outline: 2px solid magenta !important; }. Remove this rule after locating the box. If the outline is not where expected, inspect parent dimensions and positioning; if it is present but the pixels are not, revisit the response and decoding evidence.
Verify srcset, sizes, and picture
Responsive images can deliberately load a candidate other than the URL in src. Inspect currentSrc and test that exact candidate. MDN explains how browsers use responsive image candidates and how the <picture> element evaluates source conditions.
For width-descriptor candidates, make sizes match the layout
With width descriptors such as 480w and 960w, sizes tells the browser how wide the image will be displayed under relevant viewport conditions. If sizes does not describe the actual layout, the browser may choose a candidate that seems unexpectedly small or large. Verify each candidate URL and ensure each descriptor reflects that file’s intrinsic width.
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
<img src="/images/card-960.jpg" srcset="/images/card-480.jpg 480w, /images/card-960.jpg 960w" sizes="(max-width: 600px) 100vw, 50vw" alt="A ceramic mug" width="960" height="640">
Check every <picture> condition and keep a fallback
A <picture> can offer sources gated by media conditions or image types. Check whether a condition applies at the current viewport and whether the browser supports the declared type. Keep a usable nested <img> as the fallback, with its own working source and suitable alternative text.
Make lazy-loaded images reachable and reserve their space
loading="lazy" lets the browser defer loading an image until it is near the viewport. Scroll the image into view when testing; an off-screen image may not have been requested yet. If it never appears, check whether a parent’s size or positioning prevents the browser from determining when it approaches the viewport.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Provide intrinsic width and height values that match the image’s aspect ratio. The browser can reserve layout space before the file arrives, which makes rendering more predictable and reduces layout shifts. These dimensions do not force the displayed size when CSS controls the layout. MDN explains that dimensions allow space to be reserved before an image loads in its guide to HTML images.
Best Value
Use lazy loading for images that are meaningfully below the fold, not as a blanket fix for a missing source. For an image that should be immediately visible, remove lazy loading while debugging and confirm a request occurs.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Understand when CORS matters
Ordinary cross-origin images can often be displayed without making the response readable to page scripts. The special case is an image request configured with crossorigin, or code that needs to read image pixels (for example, through a canvas). In those cases, the remote server must grant access with an appropriate Access-Control-Allow-Origin response header; otherwise the browser reports a CORS error and blocks the requested access. See MDN’s CORS-enabled images guide.
If the Console identifies CORS, changing the image path or adding a header in client-side HTML cannot grant permission. Configure the image host to return the required policy for your site, or serve the image through an authorized same-origin route. Do not add crossorigin without a reason, and do not treat disabling browser security as a production fix.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Use meaningful alternative text
Alternative text does not make a failed image load, but it does matter to readers when the image cannot be seen and to assistive technology. Give informative images concise text that conveys their relevant meaning. Use alt="" only when an image is decorative and adds no information beyond nearby content. Do not put file names or generic phrases such as “image” in place of useful alternatives.
Troubleshoot by the evidence you see
| What you see | Likely layer | Next check or fix |
|---|---|---|
| No image request in Network | Markup, script, or deferred loading | Inspect the final DOM for a usable source; check lazy loading and scroll into view. |
| 404 or 403 in Network | Path or access | Open the exact Request URL; fix deployment path, capitalization, permissions, authentication, or link expiry. |
| 200 response, but preview is HTML or JSON | Server routing or authorization | Inspect the body and content type; make the URL return image bytes rather than an error or API response. |
| Image bytes arrive, but Console reports a decode error | Corrupt or unsupported image data | Verify the actual file, regenerate or convert it, and check the browser’s format support. |
| Request succeeds and no relevant Console error appears, but nothing is visible | CSS or layout | Check dimensions, visibility, clipping, hidden parents, and overlays in Computed and the box model. |
| Unexpected source requested | Responsive selection | Inspect currentSrc, srcset, sizes, and picture conditions. |
| CORS error in Console | Cross-origin access policy | For requests using crossorigin or pixel access, configure the server’s Access-Control-Allow-Origin policy. |
| Image appears after scrolling | Lazy loading | Confirm this is intended; provide dimensions and keep lazy loading for off-screen content. |
Or skip the browser setup
If your task is to capture a web page as an image or PDF rather than debug an image element in your own page, ScreenshotNeo is a website screenshot API and MCP server. Its one-call API can return a screenshot or PDF, but it does not replace checking the HTML, asset URL, or browser rendering when fixing a broken image on your site. The options and response details are in the ScreenshotNeo documentation.
For example, using cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp
Quick Recap
Cookie banners, newsletter popups, and chat widgets are removed before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers indicate the page verdict and billing status. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf to AI agents. 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 required.
Keep a reliable image-debugging checklist
- Inspect the final DOM, not only the template or source file.
- Verify the exact requested URL and response in Network.
- Confirm that the response body is valid, supported image data.
- Use Console errors to distinguish decode, CSP, mixed-content, and CORS issues.
- Check computed styles, the box model, parents, clipping, and stacking order.
- For responsive markup, compare
currentSrcwith candidates, descriptors, sizes, and media/type conditions. - For lazy images, test by scrolling into view and provide intrinsic dimensions.
- Keep meaningful
alttext, or an empty value only for decorative images.
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.
