Mapping Over Array of Images in Sanity with Next.js urlFor()
function Hero(props) {
const { heading, backgroundImage, tagline, ctas, node } = props;
console.log(backgroundImage);
return (
<div className={styles.root}>
<div className={styles.content}>
<h1 className={styles.title}>{heading}</h1>
{backgroundImage.map((background) => (
<>
<img src={`${urlFor(backgroundImage).width(2000).auto("format").url()}`} />
</>
))}
<div className={styles.tagline}>{tagline && <SimpleBlockContent blocks={tagline} />}</div>
{ctas && (
<div className={styles.ctas}>
{ctas.map((cta) => (
<Cta {...cta} key={cta._key} />
))}
</div>
)}
</div>
</div>
);
}I can see the issue in your code! You're mapping over backgroundImage array but then still using the entire backgroundImage array inside urlFor() instead of using the individual background item from the map. Here's the fix:
function Hero(props) {
const { heading, backgroundImage, tagline, ctas, node } = props;
console.log(backgroundImage);
return (
<div className={styles.root}>
<div className={styles.content}>
<h1 className={styles.title}>{heading}</h1>
{backgroundImage.map((background) => (
<img
key={background._key}
src={urlFor(background).width(2000).auto("format").url()}
/>
))}
<div className={styles.tagline}>{tagline && <SimpleBlockContent blocks={tagline} />}</div>
{ctas && (
<div className={styles.ctas}>
{ctas.map((cta) => (
<Cta {...cta} key={cta._key} />
))}
</div>
)}
</div>
</div>
);
}Key changes:
- Use
backgroundinstead ofbackgroundImageinside the map function - you want to process each individual image, not the whole array - Add a
keyprop - React needs unique keys for mapped elements. Since you're mapping over an array field in Sanity, each item should have a_keyproperty - Remove the empty fragment (
<></>) - it's unnecessary when you're only returning a single element
For your schema, make sure it looks something like this:
{
name: 'backgroundImage',
title: 'Background Images',
type: 'array',
of: [
{
type: 'image',
options: {
hotspot: true
}
}
]
}This pattern will work for all your other components that need multiple images (grids, sliders, two-column layouts). Just remember: when you map over the array, use the iterator variable (like background) inside the map function, not the original array variable.
If you want to add alt text or other metadata to your images, you can enhance the schema with custom fields as described in the Sanity image type documentation:
{
name: 'backgroundImage',
title: 'Background Images',
type: 'array',
of: [
{
type: 'image',
options: {
hotspot: true
},
fields: [
{
name: 'alt',
title: 'Alt Text',
type: 'string'
}
]
}
]
}Then access it in your component: background.alt
Show original thread3 replies
Was this answer helpful?
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.
