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"
}
]
}
]