Images in the product customizer — graphics, product mockups, customer uploads, and canvas backgrounds — may fail to load or appear as broken placeholders. This is usually caused by CORS restrictions, SSL issues, or incorrect file paths.

Symptoms

• Graphics from the library show as blank or broken images.
• Product background images do not appear on the canvas.
• Customer-uploaded images fail to display.
• The browser console shows CORS or mixed content errors.

Cause 1: CORS (Cross-Origin Resource Sharing) restrictions

The customizer canvas requires CORS headers to load images from external or CDN URLs. Without these headers, the browser blocks the image.

Fix:

1. Open the browser developer tools (F12 → Console tab).
2. Look for errors containing "CORS" or "cross-origin."
3. If images are served from a CDN or different domain, configure CORS headers on that server:
   • For AWS CloudFront / S3: add Access-Control-Allow-Origin: * to the bucket CORS configuration.
   • For Cloudflare: verify CORS headers are not stripped.
4. If images are on the same domain, this should not be an issue. Check that the image URLs use the same protocol (https) and domain as the site.

Cause 2: Mixed content (HTTP images on HTTPS site)

If your site uses HTTPS but image URLs use HTTP, the browser blocks them as mixed content.

Fix:

1. Check the browser console for "Mixed Content" warnings.
2. Update image URLs to use HTTPS:
   • If you recently migrated to HTTPS, run a search-and-replace on the database to update http:// URLs to https://.
   • Use a plugin like Better Search Replace to update URLs in the Chamevo product data.

Cause 3: Incorrect file paths after migration

If you moved your site to a new domain or directory, image paths stored in product configurations may point to the old location.

Fix:

1. Go to Chamevo → Utilities.
2. Use the migration tool to update old domain references to the new domain.
3. Alternatively, run a database search-and-replace for the old URL.

Cause 4: Server blocking remote image requests