Skip to content
Watch a live product demo 👀 See how Sanity powers richer commerce experiences
Get help on SlackWatch Sanity demo

Nextjs - How to Display Objects With Nextjs

14 replies
Last updated: Jun 6, 2022
Hi all, follow-up question to the one I asked earlier; I'm wondering what the best way to go about displaying my images with Nextjs is.
In my case, I'm rendering an object array with a name and an image, but I'm struggling to display the image properly (next Image fails to parse the src):


{logos[0].Partenaires.map((partner, i) => (
            <Image
              src={partner.partnerLogo.asset._ref}
              alt={partner.partnershipName}
              key={i}
              height={40}
              quality={100}
              layout="fill"
            />
          ))}

Jun 6, 2022, 8:27 PM
Is 
@sanity/image-url
the only way to get a url from these images?
Jun 6, 2022, 8:34 PM
You can also get the url by expanding the asset reference in your query using 
->
.
Jun 6, 2022, 8:37 PM
so something like this? whereby 
Parternaires
is my object array

*[_type=="informationsGenerales"]{
    Partenaires[] {
      ...,
      _type == "image => {
        "image": asset->url
      }
    },
    "image": image.asset->url
  }
Jun 6, 2022, 8:40 PM
What does your schema look like? If the object in the array is always going to have an image you may be able to skip the conditional!
Jun 6, 2022, 8:43 PM
this is the schema 🙂
Jun 6, 2022, 8:44 PM
I'm ok to skip the string field on line 22 if there's a way to attach an alt to the image coming out of Sanity
Jun 6, 2022, 8:45 PM
You can't attach an alt or anything like that in an out of the box image, but I think you can with the Media Plugin . It looks like we can drop that conditional and go with a named field. The following should get you the url:
*[_type=="informationsGenerales"]{
    Partenaires[] {
      ...,
      "imageUrl":image.asset->url
    },
  }
Jun 6, 2022, 8:48 PM
This is my output with that config:
Jun 6, 2022, 8:50 PM
this is when i log the output of 
Partneraires
Jun 6, 2022, 8:50 PM
Oh I got it! I had to change 
image
in the query to 
partnerLogo
(what I named it in the schema).
Jun 6, 2022, 8:54 PM
AH, yeah, I was just looking at the top line of your schema and assumed that was the name. My own schema practices created selective blindness 🙂
Jun 6, 2022, 8:57 PM
no problem lol, i'm still new to writing these queries so I assumed image.asset was some sort of keyword 🤣
Jun 6, 2022, 8:59 PM
thanks for ur help!!
Jun 6, 2022, 8:59 PM
Glad we got it sorted out!
Jun 6, 2022, 9:01 PM

Sanity.io – build remarkable experiences at scale

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

Get startedWatch demo

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
Template

Featured
Official

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen

Blog with Built-in Content Editing
Template

Featured
Official

A Sanity-powered blog with built-in content editing and instant previews.