From b3cf2252756c047c40d2094c387f3e323d0f002d Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Wed, 21 Oct 2020 22:25:14 -0500
Subject: [PATCH] Added Image Component to ProductView

---
 components/product/ProductView/ProductView.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index be41498a8..9f2a83c69 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -1,5 +1,6 @@
 import { FC, useState, useEffect } from 'react'
 import cn from 'classnames'
+import Image from 'next/image'
 import { NextSeo } from 'next-seo'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
@@ -86,11 +87,12 @@ const ProductView: FC<Props> = ({ product, className }) => {
             <ProductSlider>
               {/** TODO: Change with Image Component  **/}
               {product.images.edges?.map((image, i) => (
-                <img
-                  key={image?.node.urlSmall}
-                  className={s.img}
-                  src={image?.node.urlXL}
-                  loading={i === 0 ? 'eager' : 'lazy'}
+                <Image
+                  key={image?.node.urlOriginal}
+                  src={getPathname(image?.node.urlOriginal!)}
+                  width={1200}
+                  height={1200}
+                  priority={i === 0}
                 />
               ))}
             </ProductSlider>