Cannot access product images in Hydrogen (Remix)

[charlietlamb]

I’m currently trying to access images of products on my site to display on my home page. This is the code:

import {Link} from '@remix-run/react';
import {Image} from '@shopify/hydrogen';
import {Product} from '@shopify/hydrogen/storefront-api-types';

export function FeaturedCollection({
  products,
}: {
  products: Product[] | undefined;
}) {
  if (!products) return null;
  return (
    
      

        ### 
          Featured Collection
        
        

We think you'll love these

      

      
        {products.map((product) => (
          
            ### 
              {product.title}
            
            {product.images.nodes[0] && (
              // 
              
            )}
          
        ))}
      

    

  );
}

I can inspect and go to the URL of any of the images and it works fine however when I simply try and pass in the src of an image or use the built in image component I am unable to display images. This is the same across all pages, including product pages. How can I fix this?

[Weaverse]

I think you need to make sure the Content Security Policy is correctly set to allow Shopify images to display: https://shopify.dev/docs/storefronts/headless/hydrogen/content-security-policy

[charlietlamb]

Thank you!