时间戳

首页 > 解决方案 > Netlify CMS + Gatsby：如何在管理门户上的 Markdown 编辑器中从 html 代码中引用图像

gatsby - Netlify CMS + Gatsby：如何在管理门户上的 Markdown 编辑器中从 html 代码中引用图像

问题描述

管理门户

我正在尝试从关于页面上的降价编辑器添加图像按钮。

我在文件夹 static/img 下有图像，可以看到这些图像被复制到 public/img 文件夹中

项目结构

但是当打开关于页面时，图像总是坏的 在此处输入图像描述

所以似乎 html 图像引用总是在图像路径之前添加…/…/static/。我们该如何解决？

更新

这是我的 gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Winston Fan's Blog`,
    description:
      "This is my personal blog websit for my hobby projects, collection of my knowledge etc.",
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sass",
    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/static/img`,
        name: "uploads",
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/src/pages`,
        name: "pages",
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/src/img`,
        name: "images",
      },
    },
    {
      resolve: `gatsby-plugin-env-variables`,
      options: {
        allowList: ["NETLIFY_FUNCTION_URL_BASE", "NETLIFY_FUNCTION_ADD_SUBSCRIPTION", "NETLIFY_FUNCTION_UPDATE_SUBSCRIPTION"]
      },
    },
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-relative-images",
            options: {
              name: "uploads",
              plugins: [
                {
                  resolve: "gatsby-remark-images",
                  options: {
                    // It's important to specify the maxWidth (in pixels) of
                    // the content container as this plugin uses this as the
                    // base for generating different widths of each image.
                    maxWidth: 2048,
                  },
                }
              ]
            },
          },
          {
            resolve: "gatsby-remark-copy-linked-files",
            options: {
              destinationDir: "static",
            },
          },
        ],
      },
    },
    {
      resolve: "gatsby-plugin-purgecss", // purges all unused/unreferenced css rules
      options: {
        develop: true, // Activates purging in npm run develop
        purgeOnly: ["/all.sass"], // applies purging only on the bulma css file
      },
    }, // must be after other CSS plugins
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `AskWinston`,
        short_name: `HeyWinston`,
        start_url: `/`,
        background_color: `#FFF`,
        theme_color: `#FAE042`,
        display: `standalone`,
        icon: `src/img/wf-logo512.png`,
      },
    },
    {
      resolve: `gatsby-plugin-offline`,
      options: {
        appendScript: `src/sw.js`,
      },
    },
    {
      resolve: "gatsby-plugin-netlify-cms",
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
    "gatsby-plugin-netlify" // make sure to keep it last in the array
  ],
};

更新 2

我的 config.yml：

backend:
  name: git-gateway
  branch: master
  repo: franva/askwinston

  commit_messages:
    create: 'Create {{collection}} “{{slug}}”'
    update: 'Update {{collection}} “{{slug}}”'
    delete: 'Delete {{collection}} “{{slug}}”'
    uploadMedia: '[skip ci] Upload “{{path}}”'
    deleteMedia: '[skip ci] Delete “{{path}}”'

media_folder: "static/img"
public_folder: "/img"
publish_mode: editorial_workflow
local_backend: true

collections:
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text", required: false}
      - {label: "Featured Post", name: "featuredpost", widget: "boolean", required: false}
      - {label: "Featured Image", name: "featuredimage", widget: image, required: false}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Tags", name: "tags", widget: "list"}

  - name: "pages"
    label: "Pages"
    create: true
    files:
      - file: "src/pages/index.md"
        label: "Landing Page"
        name: "index"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "index-page"}
          - {label: Title, name: title, widget: string}
          - {label: Image, name: image, widget: image}
          - {label: Subheading, name: subheading, widget: string}
          - {label: Mainpitch, name: mainpitch, widget: object, fields: [{label: Description, name: description, widget: text}]}
          - {label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}
          - {label: Main, name: main, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Image1, name: image1, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image2, name: image2, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image3, name: image3, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}]}
      - file: "src/pages/about/index.md"
        label: "About"
        name: "about"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "about-page"}
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Body", name: "body", widget: "markdown"}

标签： gatsbynetlifynetlify-cms

解决方案

假设您的公共图像配置的 Netlify 输出是正确的，并且您的所有图像都已正确复制/static/img到/public/img文件夹，您应该将这些图像指向 Netlifiy 管理门户/img/name_of_image.jpg（注意初始斜线）。

另外，如果你使用的是markdown配置系统，你应该安装gatsby-transformer-remark插件。在这种情况下：

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 800,
        },
      },
    ],
  },
},

然后，您可以使用./name_of_image.png.

使用提供的新信息：您的路径media_folder应该public_folder类似于：

media_folder: static/assets
public_folder: /assets

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

总而言之，您的资产应该位于/static文件夹下，以确保它们在公共编译文件夹中的可用性路径。当然，您可以根据您的需要/期望的结构调整它们，但它们应该保持路径的相对性和静态文件夹结构。

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

推荐阅读