我正在关注安德鲁·米德(Andrew Mead)关于盖茨比(Gatsby)训练营的YouTube教程,该教程最多3:10:00
一切工作正常,但是一旦我安装了gatsby-remark-relative-images
和gatsby-remark-images
插件并将它们添加到gatsby-config.js
文件中以显示图像,当我运行npm run develop
时就会收到类似的错误消息如下所示。
/**
* Configure your Gatsby site with this file.
*
* See: https://www.gatsbyjs.org/docs/gatsby-config/
*/
module.exports = {
/* Your site config here */
siteMetadata:{
title:'Gatsby Bootcamp',
author:'Author'
},
plugins: [
'gatsby-plugin-sass',
{
resolve:'gatsby-source-filesystem',
options:{
name: 'src',
path: `${__dirname}/src/`
}
},
'gatsby-plugin-sharp',
{
reslove: 'gatsby-transformer-remark',
options:{
plugins:[
'gatsby-remark-relative-images',
{
resolve:'gatsby-remark-images',
options:{
maxWidth:750,
linkImagesToOriginal: false
}
}
]
}
}
]
}
请帮助!预先谢谢你。
答案 0 :(得分:0)
作为documentation explains,您必须在gatsby-node.js
中添加以下代码段:
const { fmImagesToRelative } = require('gatsby-remark-relative-images');
exports.onCreateNode = ({ node }) => {
fmImagesToRelative(node);
};
这将获取您的gatsby-source插件返回的每个节点,如果找到匹配的文件,则将markdown前置数据中的任何绝对路径转换为相对路径。