👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Issue with displaying images in a block on Next.js application resolved with the help of custom portable text and Sanity's image URL documentation.

6 replies
Last updated: Sep 5, 2023
Hi, I got this message while trying to display images I uploaded from a block(rich text). Only the text is shown but not the images. Can someone help me with this? I would appreciate it. I'm using react,nextjs. react-portable-text, typescript
Sep 5, 2023, 1:23 AM
Yea so you need to have a custom portable text that renders something with the image type. Here is mine that I used for my Next.js application
Sep 5, 2023, 2:32 AM
Thanks for your answer, now it shows me the tag of the image but in the src to show the image the url appears like this "undefined"
Sep 5, 2023, 3:19 AM
You’ll probably need to use https://www.sanity.io/docs/image-url
Sep 5, 2023, 3:20 AM
Thank you very much, the problem has been solved. One question, what about the image quality? Only in the block the images look blurry.
Sep 5, 2023, 3:53 AM
There’s a .quality() option that you can add onto it, I believe it’s in that documentation I linked to. You can also adjust the width and height.
Sep 5, 2023, 3:54 AM
Right, thank you.
Sep 5, 2023, 4:30 AM

Sanity– build remarkable experiences at scale

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

Was this answer helpful?