Gatsby markdown-remark-images 不显示

问题描述

我将 Gatsby 用于我的个人博客。我通过 Markdown 文件创建内容，该文件有效 . 我想通过使用降价语法 ![My Image](./myImage.png) 在我的内容中包含图像。

myImage.png 与 .md 文件位于同一文件夹中：

我不知道为什么它不起作用。有没有人给我一个建议？

我尝试了以下语法：

![1](./myImage.png)
![2](./blog/Software/musiker-software/myImage.png)
![3](/blog/Software/musiker-software/myImage.png)
![4](myImage.png)
![5](/myImage.png)

这是我的文件结构

/content
  /blog
    /category
       /blogcontent
         article.md
         myImage.png

这是我的 gatsby-config.js 文件（顺序相同）：

    {
      resolve: `gatsby-source-filesystem`,options: {
        name: `blog`,path: `${__dirname}/content/blog`,},{
      resolve: `gatsby-source-filesystem`,options: {
        name: `images`,path: `${__dirname}/src/images`,{
      resolve: `gatsby-transformer-remark`,options: {
        plugins: [
          {
            resolve: `gatsby-remark-vscode`,options: {
              theme: {
                default: "Dark+ (default dark)",],`gatsby-transformer-sharp`,`gatsby-plugin-sharp`,`gatsby-plugin-mdx`,options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,options: {
              maxWidth: 800,withWebp: true,showCaptions: true,quality: 100,{
      resolve: "gatsby-transformer-remark",options: {
        plugins: [
          {
            resolve: "gatsby-remark-embed-video",options: {
              width: 550,related: true,noIframeBorder: true,containerClass: "embedVideo-container"
            },

这是 HTML 输出：

<img src="./myImage.png" alt="1">
<img src="./blog/Software/musiker-software/myImage.png" alt="2">
<img src="/blog/Software/musiker-software/myImage.png" alt="3">
<img src="myImage.png" alt="4">
<img src="/myImage.png" alt="5">

解决方法

好的，我明白了：

gatsby-transformer-remark 被声明了两次，所以下一个覆盖了上一个。我合并了这两个，所以现在它可以工作了：

{
  resolve: `gatsby-transformer-remark`,options: {
    plugins: [
      {
        resolve: `gatsby-remark-images`,options: {
          maxWidth: 1200,},{
        resolve: `gatsby-remark-vscode`,options: {
          theme: {
            default: "Dark+ (default dark)",{
        resolve: "gatsby-remark-embed-video",options: {
          width: 550,related: true,noIframeBorder: true,containerClass: "embedVideo-container"
        },],`gatsby-transformer-sharp`,`gatsby-plugin-sharp`,`gatsby-plugin-mdx`,

,

我必须删除：gatsby-plugin-react-helmet

当我创建项目时，这是在我的 gatsby-config.js 中。

https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet/

 System:
    OS: Linux 4.9 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Shell: 4.4.12 - /bin/bash
  Binaries:
    Node: 12.19.0 - /usr/bin/node
    npm: 6.14.8 - /usr/bin/npm
  Languages:
    Python: 2.7.13 - /usr/bin/python
  npmPackages:
    gatsby: ^2.31.1 => 2.32.0
    gatsby-image: ^2.5.0 => 2.11.0
    gatsby-plugin-manifest: ^2.6.1 => 2.12.0
    gatsby-plugin-offline: ^3.4.0 => 3.10.0
    gatsby-plugin-react-helmet: ^3.4.0 => 3.10.0
    gatsby-plugin-sharp: ^2.14.0 => 2.14.0
    gatsby-plugin-sitemap: ^2.11.0 => 2.12.0
    gatsby-remark-images: ^3.11.0 => 3.11.0
    gatsby-source-filesystem: ^2.10.0 => 2.11.0
    gatsby-transformer-remark: ^2.16.0 => 2.16.0
    gatsby-transformer-sharp: ^2.6.0 => 2.12.0
  npmGlobalPackages:
    gatsby-cli: 2.18.0