CORS and Image Loading Issues

Having trouble loading images? CORS policies might be the cause.

What is CORS?

Cross-Origin Resource Sharing (CORS) is a browser security feature that restricts loading resources from different domains.

The Problem

When rendering, our servers fetch your images. Some servers block these requests.

Error signs:

• Images show as broken/missing
• Console shows CORS errors
• Render completes but without images

Solutions

1. Use CORS-Enabled Hosting

Host images on services that allow cross-origin requests:

• Amazon S3 (with CORS configured)
• Cloudinary
• Imgix
• Firebase Storage
• Cloudflare R2

2. Configure Your Server

Add CORS headers to your image server:

Access-Control-Allow-Origin: *

Or specifically:

Access-Control-Allow-Origin: https://api.templated.io

3. Use Public URLs

Ensure images are:

• Publicly accessible (no auth required)
• Direct URLs (not redirects)
• Permanent (not expiring signed URLs)

4. Use Data URLs

For small images, embed as base64:

{
  "layers": {
    "logo": {
      "image_url": "data:image/png;base64,iVBORw0KGgo..."
    }
  }
}

Testing URLs

Test your image URL:

curl -I https://your-domain.com/image.jpg

Look for:

• 200 OK status
• Access-Control-Allow-Origin header
• Correct Content-Type

Common Hosting Fixes

Amazon S3:

Add CORS configuration to bucket settings.

Firebase:

Update storage rules to allow public read.

Cloudinary:

Use the direct URL format (not transformed).

Still Having Issues?

1. Test URL in incognito browser
2. Check if URL requires cookies/auth
3. Try hosting on Templated (upload to assets)

Updated on: 11/01/2026