Gatsby 站点如何在 Markdown 中使用本地图片
在您构建的 Gatsby 站点,主要由 Markdown 页面或帖子,插入图像可以增强内容。您可以通过多种方式添加图像,在线图片,本地图片,都能很好支持。那么,如何在 Markdown 中,使用本地图片呢?主要有两种方案,基于 MDX
或 Transformer Remark
插件。
Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.
使用 Transformer Remark 插件
安装依赖
npm i gatsby-plugin-sharp gatsby-transformer-remark gatsby-remark-images gatsby-source-filesystem --save-dev
配置 gatsby-config.js
在 plugins
属性中,添加以下内容(当然您可以根据需要,适当修改):
module.exports = {
plugins: [
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 800,
},
},
],
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/posts`,
},
},
],
}
在 Markdown 中使用
![倾城之链](./nice-links.png)
以上,在文档 Working with Images in Markdown Posts and Pages 中,有详细描述。当然,你愿意的话,也完全可以基于 MDX 插件 来实现。
原文首发于:Gatsby 站点如何在 Markdown 中使用本地图片 | 悠然宜想亭。