Rendering Images

[elgeneee]

May I know whether it is able to render images? If not, what are the alternatives to render images when using sanity?

[coreyward]

Yeah, you can render pretty much anything. Say you have a blogImage type in your Portable Text content that is of _type: "image" with a string caption field. You could add a blogImage serializer that renders an img tag, for example, or go more complex, like this example of using gatsby-plugin-sanity-image to render the image and caption in a figure tag:

import React from "react"
import SanityImage from `gatsby-plugin-sanity-image`
import PortableText from "react-portable-text"

const BlogPost = ({ title, content }) => (
  <article>
    <h1>{title}</h1>

    <PortableText
      content={content}
      serializers={{
        image: BlogImage,
      }}
    />
  </article>
)

const BlogImage = ({ caption, ...props }) => (
  <figure style={{ maxWidth: 800 }}>
    <SanityImage
      {...props}
      width={800}
      sizes="(max-width: 848px) 100vw, 800px"
      style={{ display: "block", width: "100%" }}
    />
    {caption && <figcaption>{caption}</figcaption>
  </figure>
)