How to add image by URL when creating document with Sanity client?

Looking at your code, you have the image URL but need to properly upload it to Sanity. You can't just pass the URL directly to create() - you need to upload the image first and then reference it.

Upload the image first, then reference it

Based on the Sanity documentation on uploading assets, you need to:

1. Fetch and upload the image using client.assets.upload()
2. Get the asset reference from the upload response
3. Create your document with the image reference

Here's a complete example:

import {Readable} from 'node:stream'

async function uploadImageFromUrl(url) {
  const {body} = await fetch(url)
  return client.assets.upload('image', Readable.fromWeb(body), {
    filename: url.split('/').pop() // optional: extract filename from URL
  })
}

// Then in your create function:
const imageUrl = payload.data.object.images[0]
const uploadedImage = await uploadImageFromUrl(imageUrl)

await client.create({
  _type: "products",
  name: payload.data.object.name,
  sku: payload.data.object.id,
  price: payload.data.object.price,
  image: {
    _type: 'image',
    asset: {
      _type: 'reference',
      _ref: uploadedImage._id
    }
  }
})

Important considerations

Error handling: Always check if the image URL exists and handle fetch failures:

async function uploadImageFromUrl(url) {
  if (!url) return null
  
  try {
    const response = await fetch(url)
    if (!response.ok) return null
    
    return client.assets.upload('image', Readable.fromWeb(response.body))
  } catch (error) {
    console.error('Failed to upload image:', error)
    return null
  }
}

Avoid duplicate uploads: Sanity creates deterministic IDs based on image content, so uploading the same image multiple times won't create duplicates. However, you can optimize by tracking uploaded images with metadata using the source parameter to avoid unnecessary re-uploads during migrations.

Rate limiting: If you're uploading many images, use a library like p-limit to control concurrent uploads and avoid hitting API rate limits.

The key takeaway: you must upload the image asset first using client.assets.upload(), then reference that uploaded asset's _id in your document's image field. The JS client documentation provides more details on using the client methods.