The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →If an image is missing, diagnose it in this order: inspect the rendered <img>, identify the exact URL the browser requested, check the Network response and Console message, then verify CSS visibility. The cause is usually a bad path, a failed or unauthorized response, non-image data, browser security blocking, a wrong responsive-image candidate, or CSS hiding an image that loaded successfully.
1. Confirm what the browser actually rendered
Open DevTools (F12 or right-click the page and choose Inspect). In the Elements panel, find the final rendered <img>, not only the template source.
- Confirm the element is really
<img>, not a background image or a custom component that failed to render. - Check that
srcis present and non-empty. An empty or null URL, a URL equal to the current page, unsupported format, corrupt bytes, or corrupt metadata can all prevent loading. - If
srcsetor<picture>is present, record the candidate selected by the browser; it may differ fromsrc.
Start with this known-good pattern:
<img src="/images/photo.jpg" alt="Description of the photo" width="800" height="600">The alt text gives users a useful fallback when a request fails. Use alt="" only for decorative imagery.
2. Fix paths and URLs
Resolve the URL from the document’s actual location. A root-relative path starts at the domain root; /images/photo.jpg requests https://example.com/images/photo.jpg. A path without the leading slash, such as images/photo.jpg, is relative to the current document URL. A page at /blog/post/ therefore looks for /blog/post/images/photo.jpg.
#1 Best Overall
Path checklist
- Match spelling, capitalization, extension, and URL encoding exactly. Linux hosting is commonly case-sensitive.
- Verify the deployed directory contains the file; a local source-tree path may not exist in production.
- Use forward slashes and encode spaces or other special characters.
- Check a framework’s configured base path or public/static directory.
Open the exact URL in a new tab. If it does not display there, the HTML layout is not the primary problem. If it displays directly but not on the page, continue with Network, Console, and CSS checks.
3. Read the Network request and response
In DevTools, select Network, reload with the panel open, and filter by Img. Select the failed request.
| Evidence | Likely layer | Action |
|---|---|---|
| 404 Not Found | URL, deployment, or rewrite | Correct the path and ensure the file is deployed. |
| 403 Forbidden | Permissions, hotlink protection, or authentication | Allow the requesting origin or use a permitted URL. |
| Redirect to login or an error page | Routing or authentication | Fix the route, credentials, or public access. An HTML response is not an image. |
| Failed, blocked, or canceled | Transport, policy, extension, or browser security | Read the Console message and inspect request blocking rules. |
| 200 but broken display | Wrong bytes, MIME/format, corruption, or CSS | Inspect response headers and body, then check computed styles. |
The response must contain actual supported image bytes, not an HTML error document. Inspect the response Content-Type and preview; a server that labels or returns the wrong content can make a syntactically correct tag fail.
4. Remove HTTPS mixed content
An HTTPS page should request images over HTTPS. Change http://cdn.example.com/photo.jpg to its HTTPS equivalent or use a suitable relative URL. Browsers may upgrade some image requests and block others; serving every asset over HTTPS is the reliable fix. Mixed-content warnings appear in the Console and Network panel.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #2
5. Handle CORS only when it is involved
Ordinary same-origin images do not need a crossorigin attribute. If you add crossorigin, or if JavaScript will read the image through a canvas, the image server must return a matching Access-Control-Allow-Origin header. Otherwise the Console reports a CORS error and canvas operations may be tainted.
- Remove an unnecessary
crossoriginattribute for a normal display-only image. - If cross-origin use is required, configure the image server to allow the page’s origin (or an appropriate controlled policy) and send the attribute before the request is made.
- Do not try to solve CORS by disabling browser security; fix the server response.
6. Audit responsive images
With width descriptors such as 400w, the browser combines srcset with sizes and viewport conditions to select one candidate. Editing only src may have no visible effect because that URL was not selected.
<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">Responsive-image checks
- Inspect the Elements panel’s current source and the Network request, then open that selected URL directly.
- Verify every candidate exists and has the expected format.
- Ensure media conditions in
<picture>are correct for the current viewport. - Do not mix width descriptors (
w) and pixel-density descriptors (x) in onesrcset. - Test representative viewport widths and device-pixel ratios.
7. Check CSS after the request succeeds
A successful 200 image can still be invisible. In the Computed panel, look for display:none, visibility:hidden, opacity:0, zero width or height, clipping, an overlay, or a parent with restrictive overflow. Temporarily disable suspect rules to identify the declaration.
Give images intrinsic dimensions (or an equivalent aspect-ratio) so layout reserves space:
Recommended Free Tools
img.hero { width: 100%; height: auto; }
.card-media { aspect-ratio: 4 / 3; overflow: hidden; }Dimensions reduce layout shifts but do not repair a missing file; return to the Network response if no bytes arrived.
8. A complete diagnostic workflow
- Inspect the rendered element and note
src,srcset,sizes,picture, andcrossorigin. - Determine the absolute URL selected by the browser, including redirects.
- Reload in Network and record status, timing, request URL, response headers, and response preview.
- Open the final URL directly and confirm it returns an image rather than HTML or a login page.
- Read Console messages for mixed content, CORS, CSP, certificate, or blocked-request errors.
- Check responsive candidates and media conditions at the failing viewport.
- Only after the request succeeds, inspect computed CSS, stacking, clipping, and dimensions.
- Retest with extensions disabled or a private window if an ad blocker or privacy tool may be blocking the request.
9. Common failures and precise fixes
It works locally but not after deployment
Compare the deployed URL and filename with the local one, including case. Confirm the build copies the asset and that the production base path is correct. A root-relative path can point at the wrong host or subdirectory when an application is deployed below a domain root.
The URL works in a tab but not in the page
Compare the tab’s final URL with the Network request. The page may be using a different responsive candidate, HTTP instead of HTTPS, a cookie-protected redirect, or a restrictive CORS or content-security policy. Use the exact failing request as your evidence.
A broken-image icon appears
Read the status and response body first. Fix 404/403 responses, redirects, unsupported formats, incorrect MIME handling, or corrupt files before changing CSS.
Only some screen sizes fail
Inspect the selected srcset candidate and <picture> media branch at each size. Repair or remove the missing candidate and correct sizes.
The image occupies no space
Check computed dimensions and parent layout. Remove zero dimensions or hidden declarations and add width/height or aspect-ratio rules.
It fails only when JavaScript draws it to canvas
Configure CORS on the image response and use crossorigin correctly, or proxy the image through a server you control. Displaying an image and reading its pixels are different security operations.
10. Or skip the browser setup
For repeatable screenshots in tests, documentation, previews, or automation, ScreenshotNeo provides a website screenshot API and MCP server. It accepts a URL and returns PNG, JPEG, WebP, or PDF; before capture it accepts cookie/consent banners 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 response headers identify the page verdict and billing status.
One GET request is enough (see the ScreenshotNeo documentation):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpEquivalent Python:
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)Equivalent Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);You can also select an element, load lazy images, set a device or viewport, use dark mode and retina scale, supply CSS or JavaScript, click before capture, hide selectors, wait for a selector, delay, or network idle, block requests or resource types, set headers, cookies, user agent, authorization, timezone, and geolocation, create PDFs, resize images, cache with a chosen TTL, sign public image links, submit asynchronous jobs with signed webhooks, capture up to 100 URLs per bulk call, and use the usage API or OpenAPI specification. Its MCP tools—take_screenshot, get_page_info, and capture_pdf—work with Claude, Cursor, and other MCP clients.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is on every plan, and yearly billing gives two months free. Create a free ScreenshotNeo account.
11. Prevent the next broken image
- Use deployment checks that request critical asset URLs and verify image content, not merely a 200 status.
- Keep stable, correctly cased filenames and test production paths.
- Serve images over HTTPS with correct response headers.
- Include descriptive
alttext, intrinsic dimensions, and tested responsive candidates. - Monitor Console and Network errors in each supported browser and viewport.
Frequently Asked Questions
Should I use an absolute URL for every image?
No. Root-relative or document-relative URLs are usually easier to maintain on one site. Use an absolute URL when the image is hosted on a separate, deliberately configured origin.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Can JavaScript fix a broken image automatically?
JavaScript can replace a failed source or show a fallback, but it cannot repair a missing file, unauthorized response, mixed-content block, or invalid server bytes. Fix the underlying layer first.
Why does adding alt text not make the image appear?
Alt text is an accessible fallback shown when an image cannot load; it does not download or repair the image itself.
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.
