The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →If an image is missing from an HTML page, first find out whether the browser requested the right file and received usable image data. Inspect the rendered <img>, check the exact request in Developer Tools, and then investigate CSS if the request succeeded. That order separates a bad URL or server response from browser security rules, responsive-image selection, and styling.
Diagnose the failure in the right order
A broken-image icon usually means the browser could not load or decode the selected image. A blank space can also mean the image loaded successfully but CSS hid it, clipped it, or gave it no visible dimensions. Start with evidence from the page rather than changing markup at random.
- Inspect the rendered element. In Developer Tools, select the image in the Elements or Inspector panel. Confirm it is an
<img>, has a non-emptysrc, and is not being replaced or altered by JavaScript. If it hassrcsetor sits inside a<picture>, note those sources too. - Identify the URL the browser actually chose. A value in the HTML source is not necessarily the requested URL: responsive-image rules can select a
srcsetcandidate. Check the rendered element and Network panel. - Reload with Network open. Find the image request and inspect its status, redirects, response headers, and response preview. The status and content are more useful than the broken icon alone.
- Open that exact URL directly. If it fails in a new tab, investigate the path, server, permissions, or response. If it displays, compare the request made from the page with the direct request and then check browser policy and CSS.
- Read the Console. Record any mixed-content, CORS, decoding, or other policy messages. Fix the cause indicated by the message; adding attributes or changing protocols without evidence can create new problems.
For an image request that returns an error page, the browser may be receiving HTML rather than image bytes. A successful HTTP status alone does not prove the response is a usable image: check the response’s content type and preview or bytes as well.
Check the markup and resolve the path
A minimal known-good image element looks like this:
#1 Best Overall
<img src="/images/photo.jpg" alt="Description of the photo" width="800" height="600">Replace the example path and alternative text with values for your page. The leading slash makes /images/photo.jpg root-relative: it resolves from the website’s root. By contrast, images/photo.jpg is relative to the current document URL. A page at /articles/example/ may therefore request /articles/example/images/photo.jpg for the latter path, not /images/photo.jpg.
Verify the deployed file and spelling
- Check the final URL, including every directory, filename, extension, and capitalization. A path that works on a case-insensitive local filesystem may fail on a case-sensitive host.
- Make sure the file was copied to the deployed location. A path that matches your project’s source tree can still be wrong for the public site’s build output or hosting configuration.
- Check spaces and special characters in filenames. Prefer simple filenames; if a URL includes special characters, ensure they are encoded correctly.
- Paste the resolved URL into a new tab. If it returns 404, fix the path or deployment. If it returns 403, investigate access controls or server permissions rather than changing the image element.
For a nested page, test both the intended absolute path and the actual relative path. This catches a frequent mistake: treating a path without a leading slash as if it began at the site root.
Use Network status and response content to find server problems
In Developer Tools, filter Network requests to images if available, reload the page, and select the failed request. Record the request URL, status, redirect chain, response headers, and preview. The following signals point to different layers, so avoid applying one fix to every failure.
| Evidence | Likely layer | What to check next |
|---|---|---|
| 404 response | Path or deployment | Compare the requested URL with the deployed filename and directory. |
| 403 response | Permissions or access policy | Check whether the file is public and whether a server rule blocks the request. |
| Redirect to a login page or HTML error | Routing or authentication | Inspect the redirect destination and configure the image URL or access policy so the browser receives the image itself. |
| Request fails before a usable response | Transport or browser policy | Read the Console for a specific policy message, then check connectivity and server configuration. |
| Successful status, but no image preview or image decoding fails | Response format or file data | Check that the response contains supported image data, not an HTML page, and that the image file is not corrupted. |
| Image request succeeds and preview displays | Likely presentation or layout | Inspect computed styles, dimensions, clipping, and overlays. |
A URL working when pasted into a tab does not guarantee that the page’s request is identical. The page may select another candidate, follow a different redirect, or send a different request context. Compare the exact Network entry with the URL and response that work directly.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, 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 minuteRank #2
Fix HTTPS mixed-content requests and use CORS only when needed
HTTPS pages should request images over HTTPS
If the page is loaded over HTTPS but the image URL begins with http://, the browser may upgrade the request or block it as mixed content. Use an HTTPS image URL when the image host supports it, or use an appropriate relative URL when the page and asset are served from the same site. Check the Console after changing the URL to confirm that the mixed-content message is gone and the image request succeeds.
crossorigin is not a generic image fix
Do not add crossorigin just because an image is hosted on another domain. An ordinary image can often be displayed without making a CORS-mode request. CORS becomes relevant when the element requests cross-origin access—for example, when its pixels need to be read by a canvas. In that case, the image server must return an Access-Control-Allow-Origin value that permits the requesting origin. If the Console reports a CORS failure, configure the image server’s response appropriately; an HTML-only change cannot grant permission the server has not provided.
Check every responsive-image candidate
When an image uses srcset, sizes, or a <picture> element, the browser may request a different file from the one shown in src. A change to src alone may not fix the request the browser selected. Inspect the chosen URL in Network and verify the matching candidate, descriptor, and any media condition.
<img
src="/images/photo-800.jpg"
srcset="/images/photo-400.jpg 400w, /images/photo-800.jpg 800w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Description of the photo"
width="800"
height="600">In this example, the 400w and 800w descriptors describe candidate widths. The browser uses the layout information in sizes when choosing among width-descriptor candidates. Confirm that both files exist at their stated URLs; test the selected candidate, not only the fallback in src.
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 problemsFor <picture>, inspect each nested <source> element and its media conditions. A matching source may be chosen instead of the image element’s fallback. Keep descriptor types consistent within one srcset: do not mix width descriptors such as 400w with pixel-density descriptors such as 2x.
If the request succeeds, inspect CSS and layout
When Network shows usable image data, focus on how the element is rendered. Select the image in the Inspector, review computed styles, and temporarily disable suspicious rules. Check for:
display: none,visibility: hidden, oropacity: 0on the image or an ancestor.- A zero width or height, a constrained container, or a layout rule that collapses the element.
overflow: hiddenclipping the image, or a positioned element covering it.- Unexpected stacking order, transforms, or a color/background combination that makes the image difficult to distinguish.
Use the browser’s box model and computed dimensions to see whether the element occupies space. If removing a style makes the image appear, trace that rule back to the component or stylesheet that applies it rather than adding an unrelated override.
Set intrinsic width and height attributes, or provide an equivalent aspect-ratio rule, when the intended dimensions are known. This reserves space before the image loads and reduces layout movement; it does not make a missing or inaccessible file load.
Recommended Free Tools
Keep alternative text useful when an image is unavailable
Give a meaningful image concise alternative text that communicates the information or function it provides. Use alt="" for an image that is purely decorative and adds no information. Alternative text can remain visible to users when an image cannot load, including because of a network error, blocking, or a broken link. It is not a replacement for fixing the failed request, but it prevents the image’s purpose from disappearing with it.
Common symptoms and targeted fixes
The image works on my computer but not after deployment
Compare the browser’s requested URL with the deployed file’s actual location and capitalization. Check whether the build process copies the asset and whether your hosting setup serves that directory. A relative path can resolve differently from a nested production URL than it did in a local preview.
The broken icon appears, but the URL opens in a tab
Copy the URL from the failed Network request rather than relying on the value you expected. Confirm that the page is not requesting another srcset candidate, following a redirect to an HTML page, or encountering a Console security error.
The request is 200, but the image still does not appear
Inspect the response preview and content type, since a server can return an HTML error page with a successful status. If the response is real image data, inspect computed CSS, the element’s dimensions, its container, and overlays.
Only some screen sizes show the problem
Check the responsive candidate selected at the affected viewport and verify its URL. For <picture>, inspect media conditions; for width-descriptor srcset, check sizes and each listed file.
The Console says mixed content or CORS
For mixed content, serve the image over HTTPS. For CORS, confirm that a cross-origin request is actually required, then configure the image server’s response to allow it. Do not treat these errors as interchangeable: HTTPS fixes the transport-scheme problem, while CORS headers govern cross-origin access.
Or skip the browser setup
If you need a screenshot of the page while diagnosing its appearance, ScreenshotNeo offers a one-request screenshot API. It captures a page; it does not repair a broken image URL, server response, browser policy, or CSS rule. Its clean-shot options accept the cookie or consent banner like a visitor and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, with the outcome reported in response headers. AI agents can use its MCP server tools to take screenshots. The Free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. Every feature is on every plan. See the ScreenshotNeo website and API documentation.
For example, this cURL request saves a screenshot of Stripe as WebP. Replace YOUR_API_KEY with your access key and change the target URL as needed:
Free tools Windows power users keep installed
One-click scans. No signup required.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSign up for 1,000 free screenshots a month, with no card required.
Choose the fix that matches the evidence
Use the layer that failed to limit the scope of the change: correct a wrong path or deployment for a missing file; fix permissions or routing for an error response; serve secure assets over HTTPS for mixed content; configure CORS only for requests that need cross-origin access; correct the selected responsive candidate when its URL is wrong; and change CSS when image data loaded but is not visible. After each change, reload with Network and Console open and verify the original failure is gone.
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.
