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

问题描述

我正在尝试通过“关于”页面上的markdown编辑器添加图像按钮。

我在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",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",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,fields: [{label: heading,name: heading,widget: string},{label: Description,widget: text},{label: Blurbs,name: blurbs,widget: list,fields: [{label: Image,widget: image},{label: Text,name: text,widget: text}]}]}
          - {label: Main,name: main,{label: Image1,name: image1,{label: Alt,name: alt,widget: string}]},{label: Image2,name: image2,{label: Image3,name: image3,widget: string}]}]}
      - file: "src/pages/about/index.md"
        label: "About"
        name: "about"
        fields:
          - {label: "Template Key",default: "about-page"}
          - {label: "Title",widget: "string"}
          - {label: "Body",widget: "markdown"}

解决方法

假设用于公共映像的Netlify输出正确，并且所有映像均已从/static/img复制到/public/img文件夹，则应使用/img/name_of_image.jpg将这些映像指向Netlifiy Admin Portal （请注意初始斜杠）。

此外，如果您使用降价配置系统，则应安装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 is compiled within the same internal structure to the public folder中的所有内容，如果您创建类似/static/assets的文件夹结构，则CMS仍可访问资产的路径。此外，这会将所有上传的媒体输出到/static文件夹中，而不会影响网站的其余部分。

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

来自Netlify CMS documentation：

媒体文件夹

此设置为必需。

media_folder选项指定上传的文件夹路径相对于仓库的基础，应该保存文件。
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。

gatsby netlify netlify-cms