How to Pull in Images from Shopify Database - src Error

The error you're seeing happens because product.images is likely a Sanity image object (containing metadata like _type, asset, etc.), not a plain URL string that Next.js Image expects.

Sanity stores images as structured objects, so you need to convert them to URLs first using the @sanity/image-url package.

Here's how to fix it:

1. Install the image URL builder:

npm install @sanity/image-url

2. Create a helper function (e.g., in lib/image.js or lib/sanity.js):

import imageUrlBuilder from '@sanity/image-url'
import { client } from './sanity' // your Sanity client

const builder = imageUrlBuilder(client)

export function urlFor(source) {
  return builder.image(source)
}

3. Use it in your component:

import { urlFor } from '@/lib/image'

<Image 
  src={urlFor(product.images).width(200).height(200).url()} 
  width={200} 
  height={200}
  objectFit="contain" 
  alt=""
/>

4. Configure Next.js to allow Sanity's CDN (in next.config.js):

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.sanity.io',
      },
    ],
  },
}

The key is that urlFor(product.images).url() converts the Sanity image object into an actual URL string. You can also chain other transformations like .width(), .height(), .format('webp'), or .auto('format') for automatic format optimization based on browser support.

If product.images is an array of images, you'd need to access a specific one like urlFor(product.images[0]).url().