How to Fix Images Not Displaying on a WordPress Website
Find the failing image URL, classify the HTTP error, and fix missing files, permissions, SSL paths, thumbnails, and upload failures.
When images do not appear on a WordPress website, start with the exact image URL the browser requested. Open that URL directly, then inspect the Network and Console panels. The HTTP response usually tells you whether the problem is a missing file, permissions, mixed content, a stale domain, a missing thumbnail, or an upload-processing failure.
1. Check the failing image URL first
- Right-click the broken image and choose Open image in new tab, or copy its URL from the page source.
- Load the URL directly. Record the status code and whether the original file opens.
- Open browser developer tools, select Network, reload the page, and filter for
Img. - Check the Console for mixed-content, certificate, or blocked-request messages.
| What you see | Most likely cause | Where to fix it |
|---|---|---|
| 404 Not Found | Missing file, wrong path, renamed domain, or deleted upload | Media Library, database URLs, or filesystem |
| 403 Forbidden | Permissions, ownership, hotlink protection, or host security rule | Web server, hosting panel, or host support |
| HTTPS page requests HTTP image | Mixed content after an SSL or domain change | WordPress URLs, database content, or redirects |
| Original opens but thumbnail fails | Missing generated derivative size | Regenerate thumbnails |
| Upload processing message | Unsupported type, temporary server response, or image-processing failure | Upload workflow, server limits, or host |
2. Confirm the attachment in Media Library
Go to Media > Library and open the affected attachment.
- If the attachment is absent, check whether a migration omitted the uploads directory, a domain was renamed, or the file was deleted.
- If the attachment exists, click its file URL and open the original directly.
- If the original fails, inspect
wp-content/uploadson the server and compare its year/month path with the URL in the page. - If the original works but a displayed size fails, regenerate the missing derivative sizes.
Do not delete attachments while diagnosing. Take a backup before filesystem or database changes.
3. Fix a 404 missing image
Check the path
Compare the requested URL with the real file path. Common differences include a changed domain, an extra subdirectory, a different year/month folder, URL-encoded characters, or a filename changed during migration.
# Check the response headers
curl -I "https://example.com/wp-content/uploads/2024/05/photo.jpg"
# Download the URL to confirm the response body is really an image
curl -L "https://example.com/wp-content/uploads/2024/05/photo.jpg" -o /tmp/photo.jpg
file /tmp/photo.jpgRepair stale domain or HTTP references
After a domain or SSL change, check Settings > General for WordPress Address (URL) and Site Address (URL). Also inspect image URLs stored in post content, widgets, custom fields, theme settings, and page-builder data.
Use a migration-safe search-and-replace tool that understands serialized WordPress data. Replace the old domain or http:// references with the current HTTPS domain, then clear page, object, plugin, and CDN caches. Avoid a raw SQL replacement that can corrupt serialized values.
4. Fix a 403 Forbidden image
A 403 means the server received the request but refused it. Check the web server and host configuration for wp-content/uploads.
- Verify that the uploads directory and files have appropriate read permissions.
- Verify that the web server user owns the files or can read them.
- Check hotlink protection, firewall rules, malware scanners, and security plugins.
- Review Apache or Nginx rules for an accidental deny directive.
- Ask the host to correct ownership or a security rule when you do not have server access.
WordPress documentation notes that correct permissions may be required for the wp-content directory when uploading media. Do not make the entire site world-writable; apply the narrowest correction that restores read access.
5. Fix mixed-content images after SSL
An HTTPS page requesting an HTTP image creates mixed or insecure content. Browsers may block it or show a warning.
- Confirm the warning in the browser Console.
- Update WordPress Address and Site Address to HTTPS.
- Run a migration-safe search and replace for old HTTP URLs in content and settings.
- Check theme CSS, JavaScript, widgets, custom fields, and page-builder data for hard-coded HTTP image URLs.
- Ensure the server redirects HTTP requests to HTTPS, then purge caches.
6. Regenerate missing thumbnails and responsive sizes
WordPress creates derivative files such as medium, large, and theme-specific sizes. A theme change or incomplete migration can leave the original intact while one of those derivatives is missing.
With SSH and WP-CLI, back up first and run:
# Regenerate all attachment sizes
wp media regenerate
# Regenerate only one registered size
wp media regenerate --image_size=medium
# Create only sizes that are missing
wp media regenerate --only-missingThe official WP-CLI media regenerate documentation describes these selective options. If you use a regeneration plugin instead, choose one that is maintained and review its deletion options before running it.
After regeneration, purge caches and inspect the page again. If a size is not registered by the active theme or plugin, regeneration cannot create it; confirm the expected image size exists under Settings > Media or in the theme configuration.
7. Diagnose WordPress upload errors
| Message | Meaning | Action |
|---|---|---|
This file cannot be processed by the web server |
The file type may be unsupported or the server rejects it. | Confirm the extension and MIME type, try a standard JPEG or PNG, and check host restrictions. |
Unexpected response from the server |
The upload may have succeeded even though the editor received an unexpected response. | Reload Media Library before retrying; duplicate uploads can result from immediate retries. |
The server cannot process the image |
Image processing failed or timed out. | Retry once, then investigate memory, file size, image dimensions, PHP limits, and host image libraries. |
Follow the exact message instead of treating every upload failure as a permissions problem. Check the server error log when available.
8. Blurry images are a separate problem
An image that appears but looks soft is not missing. Use a source image large enough for its rendered dimensions, select the correct inserted size, and regenerate derivatives after changing theme image sizes. A CDN can improve delivery speed, but it cannot restore a missing or inaccessible file.
9. Inspect common edge cases
- Filename characters: Rename files containing unusual characters or spaces, then update references.
- Case sensitivity:
Photo.jpgandphoto.jpgcan be different files on Linux hosting. - Lazy loading: Inspect the actual
srcorsrcsetrequest, not only a placeholder attribute. - Responsive
srcset: One missing candidate can affect a particular viewport while another works. - CDN cache: Purge stale 404 or 403 responses after fixing the origin.
- Private or expiring URLs: Confirm that the image does not require a session or signed request unavailable to visitors.
- Image optimization plugins: Temporarily check whether an optimizer moved, renamed, or removed originals; preserve a backup before restoration.
10. A repeatable diagnostic checklist
- Copy the exact requested image URL.
- Open it directly and record the status code.
- Check Network and Console panels.
- Confirm the attachment and original in Media Library.
- Compare the URL with the uploads filesystem path.
- For 404s, repair paths or migration references.
- For 403s, correct permissions, ownership, or host rules.
- For mixed content, convert stored HTTP references to HTTPS.
- For missing derivatives, run selective thumbnail regeneration.
- For upload errors, follow the exact message and review logs.
- Purge relevant caches and verify from a logged-out browser.
11. Capture a clean before-and-after screenshot
When documenting a fix or checking how a page looks to visitors, capture the page after the diagnostic work is complete. ScreenshotNeo returns PNG, JPEG, WebP, or PDF screenshots from one GET request. Its capture can accept consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before the shot, so those overlays do not hide the image you are checking.
Or skip the browser setup
Use the ScreenshotNeo API when you need a rendered page image without maintaining a browser. See the ScreenshotNeo API documentation for all options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpimport requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed, and response headers identify the page verdict and whether it was billed. An MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
12. Performance, reliability, and cost notes
- Fix the origin URL before tuning a CDN; caching cannot repair a missing file.
- Regenerate only the sizes you need to reduce server work.
- Use appropriately sized source images to reduce transfer time and processing memory.
- Purge caches after path, permission, SSL, or thumbnail changes so old errors are not served.
- For repeated visual checks, ScreenshotNeo supports caching with a TTL you choose; cache hits are not billed.
FAQ
Why do images work in the editor but not on the live page?
The editor may use an authenticated or different URL. Inspect the live page’s actual Network request and compare its domain, protocol, path, and selected responsive size.
Should I reinstall WordPress?
No. First classify the response. Reinstallation does not restore deleted uploads or correct a host permission rule.
Can a CDN fix broken images?
It can improve delivery and cache valid files. It cannot repair a wrong URL, missing origin file, or denied request.
How do I know whether a thumbnail is missing?
If the original attachment URL opens but the URL containing a generated size returns 404, regenerate that size and purge caches.
What should I do after moving hosts?
Verify the uploads directory was copied, check ownership and permissions, update domain references safely, and regenerate derivatives that were not transferred.
