时间戳

首页 > 解决方案 > Gatsby-remark-images 偶尔会链接图像

reactjs - Gatsby-remark-images 偶尔会链接图像

问题描述

我有一个像这样的文件结构：

src
- images
- - blog-images
- - - (various png and jpg files)
- pages
- - blog
- - - (various .md files)

我通过模板成功创建了博客页面。我不知道如何使这些图像出现。我已包含 gatsby-remark-images 并由 gatsby-config.js 修改为如下所示：

plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blogImages`,
        path: `${__dirname}/src/images/blog-images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blog`,
        path: `${__dirname}/src/pages`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/Favicon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-sass`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      }
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1200
            }
          }
        ]
      }
    },

有时，当我将图像从 blog-images 文件夹移动到 images 或 pages/blog 文件夹时，图像会显示出来。但后来我尝试调整它或通过移动它在页面上获得第二张图像，它停止工作。我撤消了破坏图像的操作，但它不会再回来。

我试过关注这篇文章和这篇文章，但我并没有更接近于理解我做错了什么。

标签： reactjsimagefrontendgatsby

解决方案

发帖没多久，我就明白了。

我试图通过[alt](./filename.png)或引用图像[alt](./blog-images/filename.png)。我最终相对于帖子引用了它，而不是我的任何以图像为中心的 gatsby-source-filesystem 配置。

起作用的是[alt](../../images/blog-images/filename.png)

推荐阅读