内联图像

在正文字段中使用 Next.js Image 组件处理内联图像和媒体实体。

为了处理通过所见即所得编辑器添加的内联图像和媒体实体，我们可以使用 html 解析器将 img 标签替换为 Next.js Image 组件。

依赖项

安装 html-react-parser。

yarn add html-react-parser

组件

让我们创建一个组件来渲染 text_long（例如：node.body.processed）字段类型。

components/body.tsx

import { HTMLReactParserOptions } from "html-react-parser"
import { Element } from "domhandler/lib/node"
import parse from "html-react-parser"
import Image from "next/image"


const options: HTMLReactParserOptions = {
  replace: (domNode) => {
    // Look for an img tag and replace it with Image.
    if (domNode instanceof Element && domNode.name === "img") {
      const { src, alt, width, height } = domNode.attribs


      return (
        <Image
          src={`${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/${src}`}
          width={`${width}px`}
          height={`${height}px`}
          alt={alt}
          layout="intrinsic"
          objectFit="cover"
        />
      )
    }
  },
}


export function Body({ value }: { value: string }) {
  return <>{parse(value, options)}</>
}

我们使用 intrinsic 布局，以便图像在较小的视口中缩小，但在较大的视口中保持原始尺寸。

用法

pages/index.tsx

import { Body } from "components/body"


export default function Page({ node }) {
  return (
    <div variant="container">
      <h1>{node.title}</h1>
      <Body value={node.body.processed} /> 
    </div>
  )
}

了解更多关于 next/image 的信息。

TypeScript链接