How to Add an Image to a Payload
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:
- Fetch and upload the image using
client.assets.upload() - Get the asset reference from the upload response
- 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.
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.