Gatsbyjs对接Directus时如何获取content字段内的图片资源？

DevOps 小满

2026-10-6

解决方案

前置校验

首先确认Directus侧配置：

给content字段内嵌图片对应的资产角色开放「查看」权限，若不使用公开访问，需提前准备好有权限的API Token
确认content字段内的图片src格式：Directus默认输出相对路径，需提前拼接你的Directus实例根地址拼成完整可访问路径

方案1：直接解析渲染（无需本地处理图片）

适合不需要Gatsby做图片优化的场景：

安装HTML解析工具html-react-parser

npm install html-react-parser

在组件中获取到content字段后，遍历替换所有img标签的src为完整可访问地址，示例代码：

import parse from 'html-react-parser';

const PostContent = ({ content, directusUrl }) => {
  const parsedContent = parse(content, {
    replace: (domNode) => {
      if (domNode.name === 'img') {
        const originalSrc = domNode.attribs.src;
        // 拼接完整路径，若需鉴权可加?access_token=你的token
        domNode.attribs.src = `${directusUrl}${originalSrc}`;
      }
    }
  });
  return <div className="post-content">{parsedContent}</div>;
};

方案2：搭配Gatsby图片优化（推荐）

适合需要用到Gatsby的响应式图片、格式转换、压缩等能力的场景：

先在gatsby-config.js中配置gatsby-source-directus插件时开启downloadAssets: true，构建时会自动拉取所有Directus资产到Gatsby本地节点
在页面的GraphQL查询中，同时查询content字段和所有Directus资产的id、filename_download、gatsbyImageData
解析content字段的img标签，通过src匹配对应资产的filename_download，将原生img标签替换为Gatsby的GatsbyImage组件即可。