在 Gatsbyjs 中，当降价来自 yaml 对象属性时如何呈现降价图像？

问题描述

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

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

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

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

解决方法

您可以使用 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。