gatsby-plugin-mdx не может одновременно разрешать изображения из фронтальной части и тела

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. поэтому я думаю, что мой единственный выход - заставить тело уценки распознаватьassets/image.png и не только ../assets/image.png. Как я могу этого добиться?

Answer 1

Ваши пути для media_folder а также public_folder должно быть что-то вроде:

media_folder: static/assets
public_folder: /assets

Поскольку все в /static компилируется в той же внутренней структуре, что и общая папка, если вы создаете структуру папок, например/static/assetsпуть к вашему активу останется доступным для ваших файлов MDX. Более того, это выведет все ваши загруженные медиафайлы в ваш/static папка, не затрагивая ваши файлы MDX.

Подводя итог, ваши активы должны быть ниже /staticпапка, чтобы обеспечить их доступность в общей скомпилированной папке. Кроме того, используя относительные пути (например,../assets) может вызвать непредвиденные проблемы, подобные описанной вами, из-за процесса компиляции.

Из документации Netlify CMS:

Папка мультимедиа

Эта настройка обязательна.

В media_folder Опция указывает путь к папке, в которой должны быть сохранены загруженные файлы, относительно базы репо.

media_folder: "static/images/uploads"

Общая папка

Эта настройка обязательна.

В public_folderОпция указывает путь к папке, в которой будут доступны файлы, загруженные медиатекой, относительно базы созданного сайта. Для полей, управляемых виджетами [файл] или [изображение], значение поля создается путем добавления этого пути к имени файла выбранного файла. По умолчанию значениеmedia_folder, с отверстием /, если он еще не включен.

public_folder: "/images/uploads"

На основании приведенных выше настроек, если пользователь использовал поле виджета изображения с именем avatar для загрузки и выбора изображения под названием philosoraptor.png, изображение будет сохранено в репозитории по адресу /static/images/uploads/philosoraptor.png, а поле аватара для файла будет установлено на /images/uploads/philosoraptor.png.