gatsby - 在 Gatsbyjs 中，当 markdown 来自 yaml 对象属性时，如何渲染 markdown 图像？

Question

我正在使用 gatsbyjs 应用程序，其中有一些具有以下格式的 .yml 文件：

我的目标是将markdownContent字段的值呈现为 HTML。为此，我首先使用 'gatsby-transformer-yaml' 插件读取这些 .yml 文件的内容，然后使用remark和remark-html将markdownContent字段的值转换为 html。

html 渲染得很好，但是我无法渲染图像（链接为 markdownContent 字段的一部分）（所有图像请求都返回 404）

这种方式甚至可能吗？如果没有，当降价不是来自 gatsby-markdown-remark 时，如何让我的降价图像以 HTML 呈现？

Answer 1

您可以使用gatsby-transformer-yaml-full它将从 YAML 输入创建可查询的 GraphQL 节点。

一旦安装它（通过npm install gatsby-transformer-yaml-full或其等效纱线）：

// gatsby-config.js

module.exports = {
  plugins: [
    'gatsby-transformer-yaml-full',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: './content', // Path to your .yaml (or .yml) files
      },
    },
  ],
}

这将允许插件创建 GraphQL 节点，公开为 allCollectionYaml。例如：

{
  allCollectionYaml {
    edges {
      node {
        character
        number
      }
    }
  }
}

然后在您的页面/模板中，您只需要访问 GraphQL 数据（存储在data页面中的对象内props）并使用dangerouslySetInnerHTML它来呈现它：

function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: props.data.allCollectionYaml.edges.node[0].character}} />;
}

或者，您可以使用更安全的选项，例如markdown-to-jsx。