Summary: I am experiencing issues with loading images hosted on Prismic.io in my React application. The images are accessible directly via their URLs in a browser but fail to load within the application
Symptoms:
- Prismic.io 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:
- Use the following React code to render images:
jsx
Copy code
import React from 'react';
// Prismic.io Image
const PrismicImage = () => (
<img
src="https://images.prismic.io/slicemachine-blank/dcea6535-f43b-49a7-8623-bf281aaf1cb2_roller-skating.png?auto=compress,format"
alt="prismic url"
className="object-cover w-full h-full"
/>
);
// Shopify Image
const ShopifyImage = () => (
<img
src="https://cdn.shopify.com/s/files/1/0551/4566/0472/files/Chalet_Collection_Feature_2.jpg?v=1654902306"
alt="shopify url"
className="object-cover w-full h-full"
/>
);
const App = () => (
<div>
<PrismicImage />
<ShopifyImage />
</div>
);
export default App;
- Open the application in a browser and check the network requests in the developer tools.
Observations:
- Prismic.io 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 Prismic.io images fail, showing red "X" marks in the network tab.
Conclusion: The issue with loading Prismic.io images in the React application Any guidance or assistance from the community would be greatly appreciated!