CloudFront Image Loading Issue Documentation - netfoor/AmplifyWorkshop-RetailStore GitHub Wiki

Problem

When using CloudFront distributions in AWS Amplify applications, images may fail to load if the URL protocol (https://) is missing from the CloudFront domain reference.

Symptoms

Images don't appear in the application UI Browser console shows 404 errors for image resources Network tab shows requests going to wrong paths (e.g., http://127.0.0.1:5500/d315wq6n2wiwiv.cloudfront.net/...) Direct image URLs work when fully qualified with protocol

Root Cause

Without the https:// protocol prefix, browsers interpret CloudFront URLs as relative paths to the current domain rather than absolute URLs to the CloudFront distribution.

// Incorrect (causes browser to treat as relative path) const SOURCE_BUCKET_URL = 'd315wq6n2wiwiv.cloudfront.net';

// Correct (absolute URL with protocol) const SOURCE_BUCKET_URL = 'https://d315wq6n2wiwiv.cloudfront.net';

Amplify-Specific Considerations In Amplify applications:

Configuration may be applied inconsistently across environments (local sandbox vs. deployed) Changes to URL formats may not propagate until redeploying or refreshing the sandbox environment References to CloudFront resources need to be checked in multiple places: Frontend code Data loading utilities Form components

Solution

Always include the protocol (https://) when defining CloudFront URLs:

// In loader.ts or similar configuration files const SOURCE_BUCKET_URL = 'https://d315wq6n2wiwiv.cloudfront.net';

Verify all image references include the full URL by checking network requests in the browser

After making changes to URL formats, rebuild and redeploy the application or restart the sandbox environment:

npx ampx sandbox

For troubleshooting, create a simple test HTML file to verify direct image loading:

<!DOCTYPE html> <html> <body> <img src="https://d315wq6n2wiwiv.cloudfront.net/images/path/to/image.jpg" alt="Test"> </body> </html>

Best Practices Store CloudFront URLs in environment variables or configuration files Always include the https:// protocol in URLs Use URL validation to catch missing protocols Test image loading directly before integrating with complex components

⚠️ **GitHub.com Fallback** ⚠️