Issue/79 fallback image (#179)

* Filter products from the homepage grid display when they do not have and image. Provide a fallback/placeholder image for the ProductCard for when a product does not have an image.

* Avoid repeating placeholder image reference and move to a variable

* Remove filter to avoid additional computations as per https://github.com/vercel/commerce/pull/80#discussion_r531142893. Placeholder images will display as fallback.

* Filter products from the homepage grid display when they do not have and image. Provide a fallback/placeholder image for the ProductCard for when a product does not have an image.

* Avoid repeating placeholder image reference and move to a variable

* Remove filter to avoid additional computations as per https://github.com/vercel/commerce/pull/80#discussion_r531142893. Placeholder images will display as fallback.

* Remove comment about filter. Code removed so no longer needed.

Co-authored-by: B <curciobelen@gmail.com>

components/product/ProductCard/ProductCard.tsx

@@ -32,6 +32,7 @@ const ProductCard: FC<Props> = ({
   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<Props> = ({
               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'}
             />
           </div>
@@ -81,7 +82,7 @@ const ProductCard: FC<Props> = ({
             <div className={s.imageContainer}>
               <Image
                 quality="85"
-                src={src}
+                src={src || placeholderImg}
                 alt={p.name}
                 className={s.productImage}
                 width={imgWidth}