gatsby-plugin-mdx 无法同时解析来自 frontmatter 和 body 的图像

Question

我遇到问题的回购是https://github.com/agenciaglobal/web 这是我的 gatsby-config.js。至少是相关的部分。

    {
      resolve: `gatsby-source-filesystem`,
      options: { path: `${__dirname}/content`, name: `content` },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: { path: `${__dirname}/content/assets`, name: `assets` },
    },
    {
      resolve: "gatsby-plugin-root-import",
      options: {
        src: path.join(__dirname, "src"),
        content: path.join(__dirname, "content"),
        pages: path.join(__dirname, "src/pages"),
        shared: path.join(__dirname, "src/shared"),
        components: path.join(__dirname, "src/components"),
        static: path.join(__dirname, "static"),
      },
    },
    `gatsby-plugin-typescript`,
    `gatsby-plugin-layout`,
    `gatsby-plugin-feed-mdx`,
    {
      resolve: `gatsby-transformer-sharp`,
    },
    `gatsby-plugin-sharp`,
    `gatsby-remark-images`,
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [".mdx", ".md"],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
        ],
      },
    },
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-material-ui`,
      options: { stylesProvider: { injectFirst: true } },
    },
    {
      resolve: `gatsby-plugin-netlify-cms`,
      options: { modulePath: `${__dirname}/src/cms.js` },
    },
    {
      resolve: "gatsby-plugin-netlify-cache",
      options: { cachePublic: true },
    },

一切都在这里 https://github.com/agenciaglobal/web/blob/master/gatsby-config.js 我的网站正在运行！但我无法让图像正常工作

这是我的收藏

media_folder: content/assets
public_folder: ../assets
collections:
  - name: news
    label: Notícias
    folder: content/news
    create: true
    fields:
      - { name: path, label: Path }
      - { name: date, label: Data, widget: date }
      - { name: "body", label: "Conteúdo do blog post", widget: "markdown" }
      - { name: title, label: Título }
      - { name: description, label: Descrição }
      - name: postType
        label: Tipo de post
        widget: select
        options:
          - { label: "Notícia", value: "news" }
          - { label: "Artigo", value: "article" }
      - name: type
        label: Tipo do box de exibição na lista
        widget: select
        options:
          - { label: "Full", value: "FULL" }
          - { label: "Half", value: "HALF" }
          - { label: "Mirror", value: "MIRROR" }
          - { label: "Left", value: "LEFT" }
          - { label: "Right", value: "RIGHT" }
          - { label: "Quote", value: "QUOTE" }
      - name: "image"
        label: "Imagem de destaque"
        widget: "image"
      - label: "Tags"
        name: "tags"
        widget: "relation"
        collection: "tags"
        multiple: true
        searchFields: ["tag"]
        valueField: "tag"
        displayFields: ["tag"]
      - label: "Autor do post"
        name: "author"
        widget: "relation"
        collection: "team"
        searchFields: ["name", "about", "image"]
        valueField: "name"
        displayFields: ["name"]

那么实际新闻是这样的

---
path: posteee
date: 2020-08-13T13:59:40.634Z
title: hey
description: fe
postType: news
type: HALF
image: assets/10-maria-dornelles.jpg
tags:
  - yay!!
author: João Paulo Rocha
---
laõoo

![](../assets/1000x550.png)

这是一个有效的配置。但是 cms 永远不会写出这样的路径。这里的问题是，当使用 CMS 插入数据时，它将始终使用 public_folder。

所以如果我使用assets，它将在图像字段上工作，但在降价正文上失败。如果我使用../assets，它将在降价正文上工作，但在图像前端字段上失败

如果我尝试../assets/whatever.png，图像字段将始终失败。所以我认为我唯一的出路是让markdown的主体识别assets/image.png，而不仅仅是../assets/image.png。我怎样才能做到这一点？

Answer 1

media_folder 和 public_folder 的路径应该类似于：

media_folder: static/assets
public_folder: /assets

由于 /static is compiled within the same internal structure to the public folder 中的所有内容，如果您创建像 /static/assets 这样的文件夹结构，您的 MDX 文件仍可访问您的资产路径。此外，这将在您的/static 文件夹中输出您上传的所有媒体，而不会影响您的 MDX 文件。

总之，您的资产应该在/static 文件夹下，以确保它们在公共编译文件夹中的可用性路径。此外，由于编译过程，使用相对路径（例如../assets）可能会导致像您描述的那样的意外问题。

来自Netlify CMS documentation：

媒体文件夹

此设置是必需的。

media_folder 选项指定上传的文件夹路径 文件应该被保存，相对于 repo 的基础。

media_folder: "static/images/uploads"

公共文件夹

此设置是必需的。

public_folder 选项指定将访问媒体库上传的文件的文件夹路径，相对于已构建站点的基础。对于由 [file] 或 [image] 小部件控制的字段，通过将此路径添加到所选文件的文件名来生成字段的值。默认为media_folder 的值，如果还没有包含一个开头的 /。

public_folder: "/images/uploads"

根据上述设置，如果用户使用名为avatar 的图像小部件字段上传并选择名为philosoraptor.png 的图像，则该图像将保存到/static/images/uploads/philosoraptor.png 的存储库中，而头像字段为该文件将设置为/images/uploads/philosoraptor.png。