我已经在其他地方看到了这一点,并尝试了许多事情,但不能让它为我工作。.md身体的照片将无法显示通过gatsby-remark-images。我已经把所有的东西都更新到了最新的版本。
更新现在显示完整的配置文件
配置。
const path = require(`path`)
module.exports = {
siteMetadata: {
title: `xxx`,
description: `xxx`,
author: `xxx`,
},
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1500,
withWebp: true,
showCaptions: true,
quality: 100,
},
},
`gatsby-transformer-sharp`,
`gatsby-transformer-remark`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `markdown-pages`,
path: `${__dirname}/src/markdown-pages`,
},
},
`gatsby-plugin-sharp`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-styled-components`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `white`,
theme_color: `white`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
],
}
Inside md:
![fail](../images/demo/fail.jpeg)
为了在markdown中使用默认的图片语法,你可以指定以下内容 gatsby-images-remark
插件内的选项,以 gatsby-transformer-remark
喜欢
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1500,
withWebp: true,
showCaptions: true,
quality: 100,
},
},
],
},
},
检查 盖茨比文件 更多细节。