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 我的网站正在运行！但我无法使图像正常工作

这是我的collection

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 它将在降价主体上工作但在图像 frontmatter 字段上失败

如果我尝试 ../assets/whatever.png，图像字段总是会失败。所以我认为我唯一的出路是让降价的主体识别 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 文件夹下，以确保它们在 public 编译文件夹中的可用路径。此外，使用相对路径（例如../assets）可能会由于编译过程而导致您所描述的意外问题。

来自 Netlify CMS documentation:

媒体文件夹

This setting is required.

The media_folder option specifies the folder path where uploaded files should be saved, relative to the base of the repo.
media_folder: "static/images/uploads"

Public 文件夹

This setting is required.

The public_folder option specifies the folder path where the files uploaded by the media library will be accessed, relative to the base of the built site. For fields controlled by [file] or [image] widgets, the value of the field is generated by prepending this path to the filename of the selected file. Defaults to the value of media_folder, with an opening / if one is not already included.
public_folder: "/images/uploads"
Based on the settings above, if a user used an image widget field called avatar to upload and select an image called philosoraptor.png, the image would be saved to the repository at /static/images/uploads/philosoraptor.png, and the avatar field for the file would be set to /images/uploads/philosoraptor.png.

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

gatsby-plugin-mdx unable to resolve images from frontmatter and body at the same time

gatsby

netlify

netlify-cms

gatsby-image

gatsby-plugin-mdx