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 …

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:

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((sl…

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": …

@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 [image] 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 im…

@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.

No worries, we’ve all been there before :slightly_smiling_face: I’m glad that you’ve got everything working now!

@Levi I’ll piggyback on this post since I have a similar issue. My goal is to get the first image of a blog post (not using slices). To display the first picture I am using <prismic-image> like this: <prismic-image :field="getFirstImage(post.data.content)" /> My method finds the first…

Hi @juliandreas , I tested this and was getting the same error on pages where I didn’t have any images in the “content” field. But it was working as you show if they did. To ensure you don’t crash the site on pages that don’t have any images in the “content” field, you just need to add a check that …

@Levi Awesome, this worked. Thanks for the quick reply!

Fetching first blog-post image w/ Nuxt

Developing with Prismic

Levi (Levi Gable) June 10, 2020, 8:26am 8

No worries, we’ve all been there before

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

Topic		Replies	Views
My image component is displaying the wrong image coming from Prismic (ReactJS/NextJS/Prismic) Developing with Prismic nextjs	1	1155	November 22, 2021
Nuxt 3 - Prismic not pulling the data Developing with Prismic	7	399	September 22, 2023
Working with Unsplash images with Nuxt/Image in Slice Simulator Developing with Prismic nuxtjs	3	483	January 4, 2024
Prismic image not being cropped as configured in the dashboard Developing with Prismic	1	375	July 8, 2022
Prismic Image Metadata not working Developing with Prismic nextjs	2	350	September 18, 2023

Fetching first blog-post image w/ Nuxt

Related topics