# Fetching first blog-post image w/ Nuxt **URL:** \ **Category:** Developing with Prismic\ **Tags:** nuxtjs\ **Created:** [June 5, 2020, 1:15am UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688 "2020-06-05T01:15:36Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![rylanharper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/rylanharper/32/219_2.png) [@rylanharper](https://community.prismic.io/u/rylanharper)\ **Post date:** [June 5, 2020, 1:15am UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688/1 "2020-06-05T01:15:36Z")
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: ```auto 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 `` 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! ---
**Author:** ![Levi](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levi/32/24_2.png) [@Levi](https://community.prismic.io/u/Levi)\ **Post date:** [June 5, 2020, 9:11am UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688/2 "2020-06-05T09:11:22Z")
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: ```auto 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! ---
**Author:** ![rylanharper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/rylanharper/32/219_2.png) [@rylanharper](https://community.prismic.io/u/rylanharper)\ **Post date:** [June 5, 2020, 7:25pm UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688/3 "2020-06-05T19:25:51Z")
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: ```auto { "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? ---
**Author:** ![Levi](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levi/32/24_2.png) [@Levi](https://community.prismic.io/u/Levi)\ **Post date:** [June 8, 2020, 8:17am UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688/4 "2020-06-08T08:17:58Z")
@rylanharper, I believe that this is what you need if you’re using the `` component. Otherwise you can use the url in an ![]() element. ---
**Author:** ![rylanharper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/rylanharper/32/219_2.png) [@rylanharper](https://community.prismic.io/u/rylanharper)\ **Post date:** [June 8, 2020, 8:40pm UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688/5 "2020-06-08T20:40:00Z")
@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? ---
**Author:** ![Levi](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levi/32/24_2.png) [@Levi](https://community.prismic.io/u/Levi)\ **Post date:** [June 9, 2020, 9:28am UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688/6 "2020-06-09T09:28:33Z")
@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. ---
**Author:** ![rylanharper](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/rylanharper/32/219_2.png) [@rylanharper](https://community.prismic.io/u/rylanharper)\ **Post date:** [June 9, 2020, 9:27pm UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688/7 "2020-06-09T21:27:51Z")
Hey @Levi I got it working! It was a mistake I made and forgot to close out my `` 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 👍🏻 ---
**Author:** ![Levi](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levi/32/24_2.png) [@Levi](https://community.prismic.io/u/Levi)\ **Post date:** [June 10, 2020, 8:26am UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688/8 "2020-06-10T08:26:29Z")
No worries, we’ve all been there before 🙂 I’m glad that you’ve got everything working now! ---
**Author:** ![juliandreas](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/juliandreas/32/498_2.png) [@juliandreas](https://community.prismic.io/u/juliandreas)\ **Post date:** [July 22, 2020, 1:46pm UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688/9 "2020-07-22T13:46:48Z")
@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 `` like this: `` My method finds the first image: ``` getFirstImage(content) { const firstImage = content.find((section) => section.type === 'image'); return firstImage; } ``` It does return this object (not displaying the real url here): ``` { "type": "image", "url": "https://images.prismic.io/...etcetc", "alt": "Alt text", "copyright": null, "dimensions": { "width": 1276, "height": 1024 } } ``` Problem I’m having is that I get an error when trying to display it properly with ``. The whole object just gets undefined. `Cannot read property 'url' of undefined` Any idea what the problem could be? ---
**Author:** ![Levi](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levi/32/24_2.png) [@Levi](https://community.prismic.io/u/Levi)\ **Post date:** [July 22, 2020, 3:31pm UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688/10 "2020-07-22T15:31:20Z")
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: ```auto ``` This worked for me! ---
**Author:** ![juliandreas](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/juliandreas/32/498_2.png) [@juliandreas](https://community.prismic.io/u/juliandreas)\ **Post date:** [July 22, 2020, 4:02pm UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688/11 "2020-07-22T16:02:34Z")
@Levi Awesome, this worked. Thanks for the quick reply! ---
**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\ **Post date:** [September 15, 2020, 4:45pm UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688/12 "2020-09-15T16:45:26Z")
---
**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\ **Post date:** [December 9, 2021, 5:31pm UTC](https://community.prismic.io/t/fetching-first-blog-post-image-w-nuxt/688/13 "2021-12-09T17:31:00Z")