Issue with Loading Images from in React Application

Summary: I am experiencing issues with loading images hosted on in my React application. The images are accessible directly via their URLs in a browser but fail to load within the application


  • images do not render in the React application.
  • Network tab in the browser's developer tools shows failed image requests with red "X" marks.
  • Error messages indicate potential CORS issues.
  • Images hosted on Shopify load correctly without any issues.

Steps to Reproduce:

  1. Use the following React code to render images:


Copy code

import React from 'react';

// Image
const PrismicImage = () => (
    alt="prismic url" 
    className="object-cover w-full h-full" 

// Shopify Image
const ShopifyImage = () => (
    alt="shopify url" 
    className="object-cover w-full h-full" 

const App = () => (
    <PrismicImage />
    <ShopifyImage />

export default App;
  1. Open the application in a browser and check the network requests in the developer tools.


  • image requests fail with errors.
  • Browser console and network tab suggest CORS-related issues, with headers indicating the requests are blocked.

Error Messages:

  • Provisional headers are shown: This typically indicates a CORS preflight request issue.
  • Network errors: Requests for images fail, showing red "X" marks in the network tab.

Conclusion: The issue with loading images in the React application Any guidance or assistance from the community would be greatly appreciated!

Hi @krishnakumar.s1912 ,

Can you trying loading your images using the PrismicImage component for React?


1 Like