1

我遇到问题的仓库是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它，它将在降价正文上工作，但在图像 frontmatter 字段上失败

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

4

1 回答 1

1

你的路径media_folder和public_folder应该是这样的：

media_folder: static/assets
public_folder: /assets

由于其中的所有内容都在/static 公用文件夹的相同内部结构中编译，因此如果您创建像/static/assets资产路径这样的文件夹结构，您的 MDX 文件仍可访问。此外，这将在您的文件夹中输出您上传的所有媒体，/static而不会影响您的 MDX 文件。

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

从Netlify CMS 文档：

媒体文件夹

此设置是必需的。

该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。

于 2020-08-14T05:28:06.363 回答