Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Trouble mapping over an array of images in a Next.js starter

3 replies
Last updated: Jun 2, 2020
Mapping Over Array of Image - Hey peeps, I'm using the nextjs starter and I've got a few components I will need to build that must accept multiple image files, for example, grids, image sliders, two column layouts. I'm also trying to adapt the Hero component to accept multiple images that I can cycle through. I've changed the schema to accept an array rather than an object. However I'm having trouble getting this to translate on the front end....


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>
  );
}
Jun 2, 2020, 8:39 AM
1. This is my console output 
(2) [{…}, {…}]
2. 
0: {_key: "b4579d75774a", _type: "image", asset: {…}}
3. 
1: {_key: "e93fe9ec7b24", _type: "image", asset: {…}}
4. 
length: 2
5. 
__proto__: Array(0)

Jun 2, 2020, 8:40 AM
Hi User, inside the 
backgroundImage
array that you map, have you tried replacing:
{`${urlFor(backgroundImage).width(2000).auto("format").url()}`}
… with this?

{`${urlFor(background).width(2000).auto("format").url()}`}
This should let 
urlFor
use an array item instead of the entire array, which hopefully resolves the issue.
Jun 2, 2020, 10:48 AM
Great that worked thanks User, I've actually decided to use it as img rather than a background image but same principles, I was just passing the data in incorrectly!
Jun 2, 2020, 4:27 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?