search

adrianhajdin / ecommerce_sanity_stripe

Modern Full Stack ECommerce Application with Stripe
https://jsmastery.pro
2.21k stars 675 forks source link

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

Open Madzeedy opened 1 year ago

Madzeedy commented 1 year ago

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 commented 1 year ago

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

Madzeedy commented 1 year ago

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" />

) }

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 }) => (

Best Seller Products

speaker There are many variations passages

{products?.map((product) => )}

); 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 https://github.com/adrianhajdin/ecommerce_sanity_stripe/issues/100#issuecomment-1512802391, or unsubscribe https://github.com/notifications/unsubscribe-auth/ALSEM6FPB2EBOTF6VUUVK73XBZRORANCNFSM6AAAAAAWAK2QYE . You are receiving this because you were mentioned.Message ID: @.***>

SoumyaSubhrajit commented 1 year ago

@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 commented 1 year ago

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.