Gatsby备注图像不显示图像 [英] gatsby remark images does not display image
本文介绍了Gatsby备注图像不显示图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在其他地方看到过这种情况,并尝试了许多方法,但都不能对我起作用。.md身体照片将不会通过Gatsby-Remmark-Image显示。我也已将所有内容更新到最新版本。
更新现在显示完整的配置文件
配置:
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.
},
},
],
}
内部MD:
![fail](../images/demo/fail.jpeg)
推荐答案
为了使用标记中图像的默认语法,您可以将gatsby-images-remark
插件指定为gatsby-transformer-remark
Like
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1500,
withWebp: true,
showCaptions: true,
quality: 100,
},
},
],
},
},
有关更多详细信息,请查看gatsby documentation。
这篇关于Gatsby备注图像不显示图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文