diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 85e69b3f2..a63aacc6e 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -32,6 +32,7 @@ const ProductCard: FC = ({ imgLayout = 'responsive', }) => { const src = p.images.edges?.[0]?.node?.urlOriginal! + const placeholderImg = '/product-img-placeholder.svg'; const { price } = usePrice({ amount: p.prices?.price?.value, baseAmount: p.prices?.retailPrice?.value, @@ -58,7 +59,7 @@ const ProductCard: FC = ({ layout={imgLayout} loading={imgLoading} priority={imgPriority} - src={p.images.edges?.[0]?.node.urlOriginal!} + src={p.images.edges?.[0]?.node.urlOriginal! || placeholderImg} alt={p.images.edges?.[0]?.node.altText || 'Product Image'} /> @@ -81,7 +82,7 @@ const ProductCard: FC = ({
{p.name} { // Create a copy of products that we can mutate + // Filter products that do not have images const products = [...newestProducts] // If the lists of featured and best selling products don't have enough // products, then fill them with products from the products list, this diff --git a/public/product-img-placeholder.svg b/public/product-img-placeholder.svg new file mode 100644 index 000000000..fbb43bb62 --- /dev/null +++ b/public/product-img-placeholder.svg @@ -0,0 +1,7 @@ + + + + + + +