内联图像未从 GatsbyJS 中的降价文件正文加载
Posted
技术标签:
【中文标题】内联图像未从 GatsbyJS 中的降价文件正文加载【英文标题】:Inline images not loading from body of the markdown file in GatsbyJS 【发布时间】:2020-03-15 09:54:18 【问题描述】:我正在尝试使用 gatsby-remark-images 在我的降价文件中使用内联图像。不幸的是,图像不会加载到我的本地主机上。我不知道这只是语法错误还是我遗漏了一些严重的东西。
这是config:(我怀疑我在某处做错了什么,就在这里。)
module.exports =
siteMetadata:
title: ``,
description: `A blog where code is written about`,
author: `@wesley`,
,
plugins: [
`gatsby-plugin-sass`,
`gatsby-plugin-styled-components`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-catch-links`,
resolve: `gatsby-source-filesystem`,
options:
path: `$__dirname/src/images`,
,
,
resolve: `gatsby-source-filesystem`,
options:
path: `$__dirname/src/pages`,
,
,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
resolve: `gatsby-transformer-remark`,
options:
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: 1200,
,
,
],
,
,
`gatsby-transformer-remark`,
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/mt.png`, // This path is relative to the root of the site.
,
,
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
;
我一遍又一遍地研究关于 Gatsby 的糟糕文档。我很困惑。有人知道发生了什么吗?我能够让特色图像工作,但这不是我想要的。
package.json:
markdown 文件中的路径是正确的(我相信):
我得到的截图:
【问题讨论】:
欢迎来到 SO。请尽可能复制/粘贴您的文本,而不是使用屏幕截图。 1- 更好的可访问性 2- 更轻松的 SEO 【参考方案1】:我认为,如果您从 Gatsby 配置中删除以下 line,它将起作用。
Gatsby 配置正在使用该行而不是之前定义的配置。这就是为什么不使用gatsby-remark-images
插件的原因。
你在markdown文件中的相对路径与../../images/train.png
是对的。
从您的配置中提取的行:
module.exports =
plugins: [
// ... other plugins
resolve: `gatsby-transformer-remark`,
options:
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: 1200,
,
,
],
,
,
// `gatsby-transformer-remark`, // remove this as it will override previous configuration
]
;
加载图像的屏幕截图:
【讨论】:
哇,这完全解决了我的问题,谢谢!我最近添加了对嵌入式 youtube 视频的支持,但没有意识到我现在添加了第二个gatsby-transformer-remark
我知道这不是评论的最佳用途,但这个答案让我免于数小时的混乱调查。非常感谢。以上是关于内联图像未从 GatsbyJS 中的降价文件正文加载的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 GatsbyJS 和 GraphQL 查询和显示包含多个图像的文件夹
当我们使用 phpMailer 发送带有动态内容的邮件时,如何在电子邮件正文中显示多个内联图像
如何编写 GraphQL 查询以使用 GatsbyJS 从 mdx 文件中获取图像?