"Error: Unable to resolve image URL from source (undefined)" -> [slug].js: image[index] == undefined about ecommerce_sanity_stripe HOT 3 OPEN

hi , @topengl I may like to suggest 2 way of this issue,

1 ) The image are loading in the sanity db right, then you fetch the image by the url ,
in the client.js this pieces of code -> export const urlFor = (source) => builder.image(source); , now check the url fetching right or it gave some error, by
doing maual checks by await and fetch(), click this url some tutorial reference 👉 []
(https://www.youtube.com/watch?v=cuEtnrL9-H0&pp=ygULYXdhaXQgZmV0Y2g%3D).

2. In the Product.jsx you do the image loading process remember, <img src={urlFor(image && image[0])} width={250} height={250} className="product-image" alt="" />
   this one is load and resizes the image and make it a container so that I can fetch the
   image and load it outside, then in the [slug.js] , we render out the image for the
   image by small-image-container, right then we iterate the hole image section and
   each of the image have urlFor(item) that gave the image address , and then the
   mouse point to certain image it will set the index value. and we see the change have
   been made in the slug page.
3. see the code may be it will help you, <div className="small-images-container"> {image?.map((item, i) => ( <img // IF YOU CHANGE THE VALUE OF 'i' THEN THE IMAGE WILL CHANGE ACCORDINGLY.. key={i} src={urlFor(item)} className={i === index ? 'small-image selected-image' : 'small-image'} // THIS IS THE EVENT WHEN THE MOUSEPOINT THE REALTEED OBJECT onMouseEnter={() => setIndex(i)} /> ))}

if you have any further error, or any doubt my happy to help you with it.

from ecommerce_sanity_stripe.

Hey topengl check on the first lines where you're declaring your class ProductDetails, you might be missing curly braces parameters. Keep it up Buddy

from ecommerce_sanity_stripe.

My code is like this
<img src={urlFor(image && image.length > 1 ? image[index] : image[0])} className="product-detail-image" />

from ecommerce_sanity_stripe.