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

[torsten92]

youtube comment:
Hi @javascript Mastery. Am getting an error at around 1:28:00. "Error: Unable to resolve image URL from source (undefined)". The product Image cannot be rendered. and yet it works so fine in the project. I realized someone had the same issue and raised in on stack overflow, though there was no reply.

reply:
The issue for me was, that "index" in image[index] is not reset.
"index" is set by onMouseEnter={() => setIndex(i).
When I load a new Product from the "maylike-products-wrapper", which has not as many images as the actual one, then image[index] is undefined.

I am just starting with Web-development, so not sure if this is good practice here:
urlFor(image && ((image[index] == undefined) ? image[0] : (image[index])))

instead of:
urlFor(image && image[index])

For debugging I have followed these instructions: https://youtu.be/q3WHdoz2KmE

[SoumyaSubhrajit]

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.

[Madzeedy]

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

[khalilpyh]

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