Introduction
Migrated your Elementor site and all images are broken? Image URLs need updating after domain changes, HTTPS migrations, or moving to a CDN.
This guide shows you how to fix all broken images in Elementor—from widget images to CSS backgrounds to media library references.
Why Images Break After Migration
Common Causes
1. Domain Change:
Old: http://oldsite.com/wp-content/uploads/image.jpg
New: Should be https://newsite.com/wp-content/uploads/image.jpg
Problem: URLs still point to oldsite.com
2. HTTP to HTTPS:
Old: http://yoursite.com/uploads/image.jpg
New: Should be https://yoursite.com/uploads/image.jpg
Problem: Mixed content warnings, blocked images
3. CDN Implementation:
Old: https://yoursite.com/uploads/image.jpg
New: Should be https://cdn.yoursite.com/uploads/image.jpg
Problem: Images load from slow origin server
4. Path Changes:
Old: /home/olduser/public_html/uploads/image.jpg
New: /var/www/html/uploads/image.jpg
Problem: Server can't find images
Where Images Hide in Element or
Visible locations:
- Image widgets
- Gallery widgets
- Background images (sections/columns)
- Featured images
- Icon box images
- Team member photos
Hidden locations:
- Custom CSS backgrounds
- Inline styles
- Widget JSON data
- Post meta fields
- Media library metadata
- Template library
- Popup backgrounds
Quick Fix: Automated Replacement
Method 1: Better Search Replace (Recommended)
Step 1: Backup Everything
1. Database backup
2. wp-content/uploads/ folder backup
3. Download both to computer
Step 2: Install Plugin
Plugins → Add New → "Better Search Replace"
Install and activate
Step 3: Replace Image URLs
Tools → Better Search Replace
Search for: http://oldsite.com/wp-content/uploads
Replace with: https://newsite.com/wp-content/uploads
Select tables:
☑ wp_posts (post content)
☑ wp_postmeta (Elementor data - CRITICAL!)
☑ wp_options (site settings)
☑ Run as dry run?
Click "Run Search/Replace"
Step 4: Review Results
Check dry run shows:
- wp_postmeta: XXX changes (Elementor images)
- wp_posts: XX changes (featured images)
- wp_options: X changes (site logo, etc.)
Step 5: Execute Replacement
Uncheck "Run as dry run"
Run Search/Replace again
Note: XXX images updated
Step 6: Additional Patterns
Run these additional searches:
Protocol-relative URLs:
Search: //oldsite.com/wp-content/uploads
Replace: //newsite.com/wp-content/uploads
URL-encoded paths:
Search: http:\/\/oldsite.com\/wp-content\/uploads
Replace: https:\/\/newsite.com\/wp-content\/uploads
Mixed HTTP/HTTPS:
Search: http://newsite.com/wp-content/uploads
Replace: https://newsite.com/wp-content/uploads
Method 2: WP Migrate DB
Better for migrations with multiple URL patterns.
Setup:
Install WP Migrate DB
Tools → Migrate DB → Find & Replace tab
Add all patterns at once:
Find: http://oldsite.com/wp-content/uploads
Replace: https://newsite.com/wp-content/uploads
+ Add Row
Find: http://oldsite.com
Replace: https://newsite.com
+ Add Row
Find: //oldsite.com
Replace: //newsite.com
Execute:
Select: All tables (or wp_posts + wp_postmeta minimum)
Action: Find & Replace
Click "Find & Replace"
Fix Specific Image Types
Elementor Widget Images
Problem: Image widgets show broken image icon
Solution 1: Re-upload images
1. Edit page with Elementor
2. Click image widget
3. Choose Image → Media Library
4. Select same image (re-links to correct URL)
5. Update page
Solution 2: Bulk URL replace
Use Better Search Replace on wp_postmeta table
Updates all widget images at once
Background Images
Problem: Section/column backgrounds missing
Locations to check:
1. Section settings → Style → Background
2. Column settings → Style → Background
3. Custom CSS (if used)
Fix with search/replace:
Search: url(http://oldsite.com/uploads/background.jpg)
Replace: url(https://newsite.com/uploads/background.jpg)
Tables: wp_postmeta, wp_posts
Or manually:
1. Edit with Elementor
2. Click section/column
3. Style tab → Background → Image
4. Re-select image from library
5. Save
Featured Images
Problem: Post thumbnails broken
Check:
Posts → All Posts
Look at Featured Image column
Broken = image URL issue
Fix:
Method 1 - Search/Replace:
Search: old-domain.com/uploads
Replace: new-domain.com/uploads
Tables: wp_posts, wp_postmeta
Method 2 - Regenerate Thumbnails:
1. Install "Regenerate Thumbnails"
2. Tools → Regen. Thumbnails
3. Click "Regenerate All Thumbnails"
Gallery Images
Problem: Gallery widget shows placeholders
Fix:
1. Edit page with Elementor
2. Click gallery widget
3. Click "Create Gallery"
4. Re-select all images
5. Save gallery
6. Update page
Or bulk fix:
Better Search Replace on wp_postmeta
Updates all gallery URLs
Custom CSS Background Images
Problem: Custom CSS images broken
Check:
Elementor → Custom CSS
Or: Appearance → Customize → Additional CSS
Find:
background-image: url('http://oldsite.com/uploads/bg.jpg');
Replace:
background-image: url('https://newsite.com/uploads/bg.jpg');
Media Library URL Updates
Update Attachment URLs
Problem: Media library still references old URLs
Check:
Media → Library
Click image → View details
Check "File URL" field
Fix with plugin:
Install "Velvet Blues Update URLs"
Tools → Update URLs
Old URL: http://oldsite.com
New URL: https://newsite.com
Options:
☑ Update all embedded media files
☑ Update links in posts
☑ Update image attachments
☐ Update GUIDs (optional)
Click "Update URLs Now"
Or manual SQL:
-- Update attachment URLs
UPDATE wp_posts
SET guid = REPLACE(guid, 'http://oldsite.com', 'https://newsite.com')
WHERE post_type = 'attachment';
-- Update attachment meta
UPDATE wp_postmeta
SET meta_value = REPLACE(meta_value, 'http://oldsite.com', 'https://newsite.com')
WHERE meta_key = '_wp_attached_file';
CDN Migration
Moving Images to CDN
Scenario: Implementing CDN like CloudFlare, BunnyCDN, or KeyCDN
Old URLs:
https://yoursite.com/wp-content/uploads/image.jpg
New URLs:
https://cdn.yoursite.com/wp-content/uploads/image.jpg
Process:
Step 1: Set up CDN
1. Configure CDN service
2. Point CDN to your uploads folder
3. Test CDN URL works
Example: https://cdn.yoursite.com/wp-content/uploads/test.jpg
Step 2: Search and Replace
Search: https://yoursite.com/wp-content/uploads
Replace: https://cdn.yoursite.com/wp-content/uploads
Tables: wp_posts, wp_postmeta, wp_options
Step 3: Use CDN Plugin (Alternative)
Install: "CDN Enabler" or "WP Rocket"
Automatically rewrites URLs on-the-fly
No database changes needed
Faster and reversible
Recommended: Use CDN plugin vs database replacement for easier management.
Troubleshooting Broken Images
Images Still Broken After Replacement
Check 1: Correct URL pattern used
View page source (Ctrl+U)
Search for: "wp-content/uploads"
Check actual URL format in HTML
Use exact format in search/replace
Check 2: Cache cleared
1. Elementor → Tools → Regenerate CSS
2. Clear plugin cache (WP Rocket, etc.)
3. Clear browser cache (Ctrl+Shift+R)
4. Check again
Check 3: File permissions
SSH into server:
cd wp-content/uploads
ls -la
Check permissions:
Folders: 755
Files: 644
Fix if needed:
find . -type d -exec chmod 755 {} \;
find . -type f -exec chmod 644 {} \;
Check 4: Images physically exist
Try accessing image directly in browser:
https://yoursite.com/wp-content/uploads/2024/01/image.jpg
If 404: File missing, need to transfer files
If 403: Permission issue
If loads: URL replacement didn't work
Some Images Work, Others Don’t
Mixed content issues (HTTP/HTTPS):
Problem: Site is HTTPS, some images HTTP
Browser blocks mixed content
Solution:
Search: http://yoursite.com/uploads
Replace: https://yoursite.com/uploads
Install "Really Simple SSL" plugin
Different URL formats:
Check for variations:
- yoursite.com/uploads/image.jpg
- www.yoursite.com/uploads/image.jpg
- yoursite.com/wp-content/uploads/image.jpg
Run separate replacements for each format
Elementor Editor Shows Images, Frontend Doesn’t
Cause: Editor loads from media library, frontend uses cached URLs
Fix:
1. Clear all caches (Elementor + plugins)
2. Regenerate Elementor CSS
3. Hard refresh browser (Ctrl+Shift+R)
4. Check page in incognito mode
Prevention: Using Relative URLs
Why Relative URLs Matter
Absolute URL (breaks on migration):
<img src="https://yoursite.com/uploads/image.jpg">
Relative URL (works anywhere):
<img src="/wp-content/uploads/image.jpg">
Unfortunately…
Elementor always uses absolute URLs in:
- Image widgets
- Background images
- Gallery widgets
No built-in way to force relative URLs in Elementor.
Workaround: CDN Plugin
Use CDN rewrite plugin:
- Rewrites URLs on page load
- No database changes
- Easy to update CDN domain
- Works with Elementor
Recommended: WP Rocket or CDN Enabler
Post-Migration Checklist
After URL Replacement
☐ All caches cleared (Elementor, plugins, browser)
☐ Elementor CSS regenerated
☐ Test 10+ pages with images
☐ Check homepage images
☐ Verify background images
☐ Test gallery widgets
☐ Check featured images on blog
☐ Verify image lightboxes work
☐ Test mobile responsive images
☐ Check image widgets in popups
☐ Verify logo displays correctly
☐ Test social sharing images
☐ Check no console errors (F12)
☐ Verify Google PageSpeed still good
Tools & Plugins Summary
For URL Replacement
- Better Search Replace – Best all-around
- WP Migrate DB – Best for full migrations
- Velvet Blues Update URLs – Simple, limited
For CDN Setup
- WP Rocket – Premium, full features
- CDN Enabler – Free, simple
- W3 Total Cache – Free, complex
For Troubleshooting
- Regenerate Thumbnails – Fix broken thumbnails
- Really Simple SSL – Fix mixed content
- Health Check – Debug plugin conflicts
Conclusion
Fixing image URLs in Elementor after migration is straightforward with Better Search Replace. The key is updating wp_postmeta (where Elementor stores data) and clearing all caches after.
Quick Action Plan:
- ✅ Backup database and uploads folder
- ✅ Use Better Search Replace with dry run
- ✅ Replace all URL variations
- ✅ Clear Elementor cache and regenerate CSS
- ✅ Test thoroughly on multiple pages
- ✅ Fix any remaining issues manually
Prevention: Use a CDN plugin for future flexibility instead of hard-coding URLs in database.
Frequently Asked Questions
Q: Do I need to transfer the actual image files? A: Yes! URL replacement only updates links. Files must exist on new server.
Q: Will this affect my media library? A: Yes, in a good way. It updates attachment URLs to match new domain.
Q: Can I migrate images to a different folder structure? A: Possible but complex. Use Find/Replace for both old and new paths carefully.
Q: What about images in widgets outside Elementor? A: Search/replace in wp_posts and wp_options tables covers most standard WordPress widgets.
Q: Should I update GUIDs? A: Debatable. WordPress says no, but for domain changes, it’s usually safe and helpful.
Q: How do I test if all images updated? A: Search database for old domain: wp db search 'oldsite.com' --all-tables (WP-CLI)
Fixed your images? Share how many images you updated in the comments!