Unable to resolve image URL from source (undefined) at 1:28 min

[Madzeedy]

I have tried to get the results in the terminal it is working but in the browser rendering the image details brings that error, any help would be highly appreciated.

[SoumyaSubhrajit]

@Madzeedy gave me more details on this issue so that I can help you with this.

[Madzeedy]

Hey, thank you so much for your help I was trying to develop the app, it is working very well so far but when I click on an item, I get that error saying that: Unable to resolve image URL from source (undefined) my slug.js: import React, { useState} from 'react' import { AiOutlineMinus, AiOutlinePlus, AiFillStar, AiOutlineStar } from ' react-icons/ai'; import { client, urlFor } from '../../lib/client' import { Product } from '../../components'; const ProductDetails = ( product, products) => { const { image, name, details, price } = product; return ( <div> <div className="product-detail-container"> <div> <div className="image-container"> <img src={urlFor(image && image[index])} className=" product-detail-image" /> </div> </div> </div> </div> ) } export const getStaticPaths = async () => { const query = `*[_type == "product"] { slug { current } } `; const products = await client.fetch(query); const paths = products.map((product) => ({ params: { slug: product.slug.current } })); return { paths, fallback: 'blocking' } } export const getStaticProps = async ({ params: {slug}}) => { const query = `*[_type == "product" && slug.current == '${slug}'][0]`; const productsQuery = '*[_type == "product"]'; const product = await client.fetch(query); const products = await client.fetch(productsQuery); console.log(product); return { props: { products, product } } } export default ProductDetails and here is my client.js file: import sanityClient from ***@***.***/client'; import imageUrlBuilder from ***@***.***/image-url' export const client = sanityClient({ projectId: 'h7ypths9', dataset: 'production', apiVersion: '2023-03-11', useCdn: true, token: process.env.NEXT_PUBLIC_SANITY_TOKEN }); const builder = imageUrlBuilder(client); export const urlFor = (source) => builder.image(source); and last here's my index.js import React from 'react' import { client } from '../lib/client' import { Product, FooterBanner, HeroBanner } from '../components' const Home = ({ products, bannerData }) => ( <div> <HeroBanner heroBanner={bannerData.length && bannerData[0]} /> <div className="products-heading"> <h2>Best Seller Products</h2> <p>speaker There are many variations passages</p> </div> <div className="products-container"> {products?.map((product) => <Product key={product._id} product={ product} />)} </div> <FooterBanner footerBanner={bannerData && bannerData[0]} /> </div> ); export const getServerSideProps = async () => { const query = '*[_type == "product"]'; const products = await client.fetch(query); const bannerQuery = '*[_type == "banner"]'; const bannerData = await client.fetch(bannerQuery); return { props: { products, bannerData } } } export default Home For any other detail, please help me by contacting me at this email address, or my WhatsApp number +250784166042 Le mar. 18 avr. 2023 à 12:05, Soumya Subhrajit Bag ***@***.***> a écrit :

…

@Madzeedy <https://github.com/Madzeedy> gave me more details on this issue so that I can help you with this. — Reply to this email directly, view it on GitHub <#100 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALSEM6FPB2EBOTF6VUUVK73XBZRORANCNFSM6AAAAAAWAK2QYE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[SoumyaSubhrajit]

@Madzeedy bruh, You miss a bunch for code in slug.js , please revisit the video and try to write the code as well. You forgot to iterate the image to display an image in the product detail part.

for example, you miss this code..

 {/* THIS IS FOR THE SMALL IMAGES THAT APPPER IN THE PRODUCTS DEATILS ... */}
          <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)}
              />
            ))}
          </div>

[tommichaels]

Hello @Madzeedy , Have you fixed this? I just fixed mine so I was wandering if you've done yours because this was a pain to fix in Next13 and it's a simple fix.