Fetching first blog-post image w/ Nuxt

Hi there! There is probably a simple solution to this, but I am having trouble figuring which query to use within prismic api…

I am creating a site for a client and I tend to start out with the Prismic/Nuxt Blog repo and go from there which works great… My client wants the first primary image to be display with each corresponding blog post (first image on each post). I notice there is a straightforward “get first paragraph” method function:

getFirstParagraph (post) {
      const textLimit = 300
      const slices = post.data.body
      let firstParagraph = ''
      let haveFirstParagraph = false

      slices.map(function (slice) {
        if (!haveFirstParagraph && slice.slice_type === 'text') {
          slice.primary.text.forEach(function (block) {
            if (block.type === 'paragraph' && !haveFirstParagraph) {
              firstParagraph += block.text
              haveFirstParagraph = true
            }
          })
        }
      })
    }
  }
}

I want to get the first image along with the first paragraph as well…

I am just a bit confused on how use a <pismic-image> within a widget and query the first image of each post. Would a function similar to this be ideal or is there a smarter approach? (lol sorry I normally have images in a for-loop on there on pages i.e work or blog page, not in widgets displayed on the home page, which is why I am a bit stumped on this one). Any guidance/code suggestions on this would be really helpful:)

Maybe I am just doing this wrong and should not create a widget for this too… Any suggestions would be great!

Hi @rylanharper, you should be able to create a simple function that will return the first image. I haven’t tested this, but I think something like the following should work to retrieve the first image:

getFirstImage (post) {
  const slices = post.data.body
  const firstImageSlice = slices.find((slice) => slice.slice_type === 'image_with_caption')
  return firstImageSlice.primary.image
  }
}

This will return the image field from the first image slice. You should be able to input the image field returned from this function directly into a element.

Let me know if this works for you!

Hey Levi!

Ah okay got it! Yes I was using the wrong query and not grabbing the correct slice name…simple mistake, but I missed it haha… It is working now, but the only issue that I am running into is that the function returns the image in json format instead of the image itself:

{
  "dimensions": {
    "width": 1200,
    "height": 767
  },
  "alt": "An image by Rylan Harper",
  "copyright": null,
  "url": "https://images.prismic.io/nuxt-prismic-starter/e9a94644-f76e-4ff2-88c4-6131068b2501_gw+%E2%80%93+17.png?auto=compress,format&rect=0,0,1439,920&w=1200&h=767"
}

Does it need to be a block type in order to display correctly?

@rylanharper, I believe that this is what you need if you’re using the <prismic-image> component. Otherwise you can use the url in an element.

@levi Hmm I am still having trouble with it displaying correctly…It still comes out as json in my html. I’d rather not have to post the url in an element either… I am still a bit confused on how to display the image in a block type (unfamiliar with that area of the api) so that it displays as the image itself.

Any idea on a workaround for this?

@rylanharper I think I’ll need to take a closer look at things. Can you send me your project files so that I can look into this? You can either send me a zip file or a link to github, whichever is easier for you. And if you don’t want to share it publicly, you can DM me.

Hey @levi

I got it working! It was a mistake I made and forgot to close out my <prismic-image> tag… :upside_down_face: I am sorry I wasted your time on a simple mistake! Everything is working correctly now and the function you provided is just what I needed :+1:t2:

No worries, we’ve all been there before :slightly_smiling_face:

I’m glad that you’ve got everything working now!