CODEWITHSUNDEEP
javascriptreactjsnext.jssanity
Cem
Cem

Reputation: 83

Can't display images from block content with PortableText

It been really long time I stuck with this issue. I'm still learning but can't move because of this partically case.

Links and texts are good but I couldn't show the images whatever I did, didn't work.

I'm working on standard project that I generated here

import markdownStyles from "./markdown-styles.module.css";
import { PortableText } from "@portabletext/react";


export default function PostBody({ content }) {
  return (
    <div className="max-w-2xl mx-auto" className={markdownStyles.markdown}>
      <PortableText value={content} />
    </div>
  );
}

This is the output I get from the content. I can see image type. I also tried by adding custom component, but still didn't work

    [
    {
    "_key": "5ce765e42eb5",
    "_type": "block",
    "children": [
        {
        "_key": "c57bc9898e06",
        "_type": "span",
        "marks": [
            "836416fa85ed"
        ],
        "text": "Welcome to my new blog!"
        }
    ],
    "markDefs": [
        {
        "_key": "836416fa85ed",
        "_type": "link",
        "href": "https://google.com"
        }
    ],
    "style": "h2"
    },
    {
    "_key": "11b612a096de",
    "_type": "block",
    "children": [
        {
        "_key": "bf13eac39637",
        "_type": "span",
        "marks": [],
        "text": "Sanity.io lets me work with structured content. That means I can add more content types. Who knows, I might add my portfolio, "
        },
        {
        "_key": "c9fe6a6bb0f3",
        "_type": "span",
        "marks": [
            "e202c343ba02"
        ],
        "text": "maybe a podcast"
        },
        {
        "_key": "7a203dce7337",
        "_type": "span",
        "marks": [],
        "text": ", "
        },
        {
        "_key": "94459dbc472b",
        "_type": "span",
        "marks": [
            "9fbf2c53c020"
        ],
        "text": "some products that I need to market"
        },
        {
        "_key": "e5d3752691f2",
        "_type": "span",
        "marks": [],
        "text": ", or my poetry collection (that I totally have)! I can even connect other frontends to my Sanity project when I find that new framework I just need to try out."
        }
    ],
    "markDefs": [
        {
        "_key": "e202c343ba02",
        "_type": "link",
        "href": "https://github.com/kmelve/sanity-plugin-podcast"
        },
        {
        "_key": "9fbf2c53c020",
        "_type": "link",
        "href": "https://www.sanity.io/blog/e-commerce-sample-schema"
        }
    ],
    "style": "normal"
    },
    {
    "_key": "5cdb13c0961f",
    "_type": "block",
    "children": [
        {
        "_key": "a0d77a44e824",
        "_type": "span",
        "marks": [],
        "text": ""
        }
    ],
    "markDefs": [],
    "style": "normal"
    },
    {
    "_key": "23a029d1e942",
    "_type": "image",
    "asset": {
        "_ref": "image-a526b96131f4da2799071600492f8afbe4de62a3-900x900-webp",
        "_type": "reference"
    }
    },
    {
    "_key": "a8744e882bab",
    "_type": "block",
    "children": [
        {
        "_key": "f028ef71c8e2",
        "_type": "span",
        "marks": [],
        "text": "img"
        }
    ],
    "markDefs": [],
    "style": "normal"
    },
    {
    "_key": "398aea7e852b",
    "_type": "block",
    "children": [
        {
        "_key": "ce6249854da8",
        "_type": "span",
        "marks": [],
        "text": "But firstly, how could I make this blog my own special place on the internet?"
        }
    ],
    "markDefs": [],
    "style": "normal"
    },
    {
    "_key": "4e33a24403f6",
    "_type": "block",
    "children": [
        {
        "_key": "0a678ac11d25",
        "_type": "span",
        "marks": [],
        "text": "I should probably check out the tutorial videos on how to get started with customizing both the content schema and the frontend accordingly."
        }
    ],
    "markDefs": []
    },
    {
    "_key": "13ba10479b9c",
    "_type": "block",
    "children": [
        {
        "_key": "2c71eab6accc",
        "_type": "span",
        "marks": [],
        "text": "There's plenty of cool things I could explore:"
        }
    ],
    "markDefs": []
    },
    {
    "_key": "be751db6e0d0",
    "_type": "image",
    "asset": {
        "_ref": "image-c6f278aa0550e1c5617d26e67944086f8a21a4c8-800x800-webp",
        "_type": "reference"
    },
    "crop": {
        "_type": "sanity.imageCrop",
        "bottom": 0,
        "left": 0,
        "right": 0,
        "top": 0
    },
    "hotspot": {
        "_type": "sanity.imageHotspot",
        "height": 1,
        "width": 1,
        "x": 0.5,
        "y": 0.5
    }
    },
    {
    "_key": "557a095c0eed",
    "_type": "block",
    "children": [
        {
        "_key": "43364982b47a",
        "_type": "span",
        "marks": [
            "27519f331ef1"
        ],
        "text": "How to customize content schemas"
        }
    ],
    "level": 1,
    "listItem": "bullet",
    "markDefs": [
        {
        "_key": "27519f331ef1",
        "_type": "link",
        "href": "https://www.sanity.io/docs/the-blog-template"
        }
    ]
    },
    {
    "_key": "698010eacb6f",
    "_type": "block",
    "children": [
        {
        "_key": "2913625481f0",
        "_type": "span",
        "marks": [
            "e7e3f00bdddf"
        ],
        "text": "How to use structure builder to make my own workflows"
        }
    ],
    "level": 1,
    "listItem": "bullet",
    "markDefs": [
        {
        "_key": "e7e3f00bdddf",
        "_type": "link",
        "href": "https://www.sanity.io/docs/content-studio/structure-builder"
        }
    ]
    },
    {
    "_key": "36bf78dc4fad",
    "_type": "block",
    "children": [
        {
        "_key": "81b76c937c46",
        "_type": "span",
        "marks": [
            "0a3a661f75ef"
        ],
        "text": "How to manage widgets on my dashboard"
        }
    ],
    "level": 1,
    "listItem": "bullet",
    "markDefs": [
        {
        "_key": "0a3a661f75ef",
        "_type": "link",
        "href": "https://github.com/sanity-io/sanity/blob/next/packages/%40sanity/dashboard/README.md"
        }
    ]
    },
    {
    "_key": "5112fa59322d",
    "_type": "block",
    "children": [
        {
        "_key": "8901d5ceef26",
        "_type": "span",
        "marks": [
            "bd816d006b06"
        ],
        "text": "the friendly developer community"
        },
        {
        "_key": "ff01f7459236",
        "_type": "span",
        "marks": [],
        "text": "."
        }
    ],
    "markDefs": [
        {
        "_key": "bd816d006b06",
        "_type": "link"
        }
    ]
    }
]

Upvotes: 0

Views: 1927

Answers (1)

ivanatias
ivanatias

Reputation: 4033

In order to render the images coming from your portable text, you need to generate the URL for those images using some utilities provided by Sanity: Sanity image url-builder and optionally Sanity asset utils to get images dimensions, etc.

Once you configure these tools following docs instructions, you can customize how you render your content using the components prop of the PortableText component (basically styling the output however you want). Read more about this here.

When it comes to querying for images in Sanity documents, most of the time you don't really need the url-builder since you can directly query for the URL of the asset. However, it's different when you query for images that have been added in a rich text editor since Sanity doesn't provide a URL for the asset, you need to build it.

Upvotes: 1

Related Questions