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:
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:
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.
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:
@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.
@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.
I got it working! It was a mistake I made and forgot to close out my <prismic-image> tag… 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
Problem I’m having is that I get an error when trying to display it properly with <prismic-image>. The whole object just gets undefined. Cannot read property 'url' of undefined
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 there is an image returned in the first place: