来自 markdown 帖子的 Gatsby 图像未从 graphql 查询中显示
Gatsby images from markdown posts not displaying from graphql query
我使用 Gatsby 和 Tailwind 为博客 posts 使用 markdown 构建了一个博客。使用 graphql 查询数据时，无法显示任何图像。我的图像存储在 images/ 文件夹中的 src/ 目录中。我的 post 位于同一目录中的 pages/ 文件夹中。有一次，该站点显示了所有图像，包括 markdown 中的图像，但在部署到 Netlify 时无法正常工作。我已经部署了网站，但现在 none 的图像正在显示，我已尽一切努力让它们恢复原状。我也尝试过使用 gatsby-image（固定和流动）但仍然没有。
这是我第一个使用 gatsby、markdown 和 graphql 的项目。目前，部署的站点 nikkipeel.netlify.app 在使用开发工具 (../images/example.jpg) 检查时在博客页面上显示了 posts 的正确路径，但实际上仍然没有图像显示。 ♀️
Github 回购：gatsby-blog
项目结构：
|-- /public
|-- /src
|-- /components
|-- /pages
|-- /post-one
|--index.md
|-- /post-two
|--index.md
|-- /post-three
|--index.md
|-- /templates
|-- blog-post.js
|-- /images
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js
博客的前文 post (index.md) -
---
path: "/create-a-blog-with-react-and-sanity"
date: "2021-01-10"
title: "Create a blog with React and Sanity"
description: "Create a technical blog built with React, TailwindCSS, and Sanity then deploy it using Github and Netlify"
category: "React"
author: "Nikki Peel"
authorImage: ../images/selfie.png
image: ../images/sanity-blog-collage.jpg
---
Blog.js 使用 Graphql 查询显示所有 posts:
import React from "react"
import { graphql } from 'gatsby'
import Layout from "../components/layout"
import Link from 'gatsby-link';
import SEO from "../components/seo"
const BlogPage = ({ data }) => (
<Layout>
<SEO title="Blog" />
<main className="bg-brown text-white h-auto p-12">
<section className="container mx-auto">
<h1 className="text-4xl mono pl-4">Latest Blog Posts</h1>
<h2 className="text-lg mb-12 pl-4">Welcome to my page of blog posts</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-center mx-auto md:gap-8 mb-24">
{data.allMarkdownRemark.edges.map(post => (
<article>
<Link to={post.node.frontmatter.path}>
<div className="block lg:h-64 relative leading-snug" key={ post.node.id }>
<img src={post.node.frontmatter.image} alt="" className="lg:block w-full items-center lg:h-full lg:object-cover lg:object-top relative lg:absolute"/>
<span className="block relative lg:h-full lg:flex lg:items-end ">
<h3 className="lg:bg-gray-800 lg:bg-opacity-75 text-white text-xl font-semibold lg:px-3 lg:py-4 rounded text-left">{post.node.frontmatter.title}</h3>
</span>
<div className="mt-4 mb-8">
<p className="text-base mb-4">{post.node.frontmatter.description}</p>
<span id={post.node.frontmatter.category} className="text-black font-semibold text-sm py-2 px-4 mr-2 rounded">{post.node.frontmatter.category}</span>
<small className="text-base ml-2">📅 {post.node.frontmatter.date}</small>
</div>
</div>
</Link>
</article>
))}
</div>
</section>
</main>
</Layout>
)
export const pageQuery = graphql`
query BlogIndexQuery {
allMarkdownRemark (sort: { fields: [frontmatter___date], order: DESC }){
edges {
node {
id
frontmatter {
path
title
description
date
category
image
}
}
}
}
}
`;
export default BlogPage;
对于单个帖子 - 博客-post.js:
import React from 'react';
import { graphql } from 'gatsby'
import Link from 'gatsby-link';
import Layout from '../components/layout';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
export default function Template({ data }) {
const post = data.markdownRemark
return (
<Layout>
<main className="container bg-brown min-h-screen p-4 md:p-12">
<Link to="/blog" exact className="text-white text-base items-center"><FontAwesomeIcon icon={faChevronLeft} className="mr-4"></FontAwesomeIcon> Back to Blog</Link>
<article className="container text-white mx-auto rounded-lg mt-4">
<header className="relative">
<div className="absolute h-full w-full flex items-center justify-center p-8">
<div className="bg-white text-brown bg-opacity-75 rounded p-4 md:p-12">
<h1 className="mono text-3xl mb-4">
{post.frontmatter.title}
</h1>
<div className="flex justify-center text-brown">
<img src={post.frontmatter.authorImage} alt="" className="w-10 h-10 rounded-full"/>
<p className="mono flex items-center pl-4 text-xl">{post.frontmatter.author}</p>
</div>
<p className="text-base font-semibold mt-4 text-center">Published on <strong>{post.frontmatter.date}</strong></p>
</div>
</div>
<img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full object-cover object-left-top rounded-t" style={{ height: "400px", width: "100%"}}/>
</header>
<div className="break-words px-4 lg:px-16 py-12 lg:py-20 prose lg:prose-xl max-w-screen leading-normal">
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</div>
</article>
</main>
</Layout>
)
}
export const postQuery = graphql`
query BlogPostByPath($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }){
html
frontmatter {
path
title
date
author
authorImage
image
}
}
}
`
使用 graphiql playground 时，会为 blog.js 检索正确的图像路径，但不会为 blog-post.js（个人 posts）检索正确的图像路径：
blog.js查询：
{
"data": {
"allMarkdownRemark": {
"edges": [
{
"node": {
"frontmatter": {
"path": "/customizing-the-scrollbar-with-css",
"title": "Customizing the Scrollbar with CSS",
"description": "Learn how to apply custom styling to the scrollbar on your project with pure CSS",
"date": "2021-01-28",
"category": "CSS",
"image": "../images/scrollbar.png"
}
}
},
博客-post.js查询：
{
"errors": [
{
"message": "Variable \"$path\" of required type \"String!\" was not provided.",
"locations": [
{
"line": 1,
"column": 24
}
],
"stack": [
"GraphQLError: Variable \"$path\" of required type \"String!\" was not provided.",
" at _loop (C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\graphql\execution\values.js:92:17)",
" at coerceVariableValues (C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\graphql\execution\values.js:119:16)",
" at getVariableValues (C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\graphql\execution\values.js:48:19)",
" at buildExecutionContext (C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\graphql\execution\execute.js:184:61)",
" at executeImpl (C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\graphql\execution\execute.js:89:20)",
" at execute (C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\graphql\execution\execute.js:64:35)",
" at C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\express-graphql\index.js:152:16",
" at runMicrotasks (<anonymous>)",
" at processTicksAndRejections (internal/process/task_queues.js:93:5)"
]
}
],
"extensions": {}
}
盖茨比-node.js-
我在此处将 'image' 和 'authorImage' 添加到 frontmatter 时收到错误消息
const path = require('path');
exports.createPages = ({actions, graphql}) => {
const { createPage } = actions
const postTemplate = path.resolve('src/templates/blog-post.js');
return graphql(`
{
allMarkdownRemark{
edges {
node {
html
id
frontmatter {
path
title
date
author
category
description
}
}
}
}
}
`).then(res => {
if(res.errors) {
return Promise.reject(res.errors)
}
res.data.allMarkdownRemark.edges.forEach(({node}) => {
createPage({
path: node.frontmatter.path,
component: postTemplate
})
})
})
}
// for RSS feed:
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}
盖茨比-config.js-
module.exports = {
siteMetadata: {
title: `Nikki Peel - Blog`,
description: `Technical blog created with Gatsby and Markdown`,
author: `Nikki Peel`,
siteUrl: `https://nikkipeel.netlify.app`,
},
plugins: [
`gatsby-transformer-remark`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-catch-links`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
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/blog-logo.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-feed`,
`gatsby-plugin-postcss`,
`gatsby-plugin-fontawesome-css`,
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
正如您在 documentation 中看到的那样，在处理 markdown plus 图像时，路径应该是相对于 markdown 文件本身的：
---
path: "/create-a-blog-with-react-and-sanity"
date: "2021-01-10"
title: "Create a blog with React and Sanity"
description: "Create a technical blog built with React, TailwindCSS, and Sanity then deploy it using Github and Netlify"
category: "React"
author: "Nikki Peel"
authorImage: /gatsby-blog/images/selfie.png
image: /gatsby-blog/images/sanity-blog-collage.jpg
---
来自post-一个：https://github.com/nikkipeel/gatsby-blog/blob/main/src/pages/post-one/index.md
应该变成：
---
path: "/create-a-blog-with-react-and-sanity"
date: "2021-01-10"
title: "Create a blog with React and Sanity"
description: "Create a technical blog built with React, TailwindCSS, and Sanity then deploy it using Github and Netlify"
category: "React"
author: "Nikki Peel"
authorImage: ../../images/selfie.png
image: ../../sanity-blog-collage.jpg
---
注意两个图像的相关性 (../../images/selfie.jpg)。这将允许 Gatsby 创建一个有效的 GraphQL 节点，并且它将在 GraphQL 游乐场 (localhost:8000/___graphql).
中显示 childImageSharp 节点。
Field "image" must not have a selection since type "String" has no
subfields. This can happen if you e.g. accidentally added { } to the
field "image". If you didn't expect "image" to be of type "String"
make sure that your input source and/or plugin is correct.
与看起来不同，这是一个很好的错误，因为它指出 Gatsby 正在尝试从您的降价文件创建节点（即：您的路径现在已被很好地引用）并且您将能够使用 gatsby-image.根据 docs.
，我意识到您缺少一些插件
添加 gatsby-transformer-remark 和 gatsby-remark-images 插件。
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 800,
},
},
],
},
},
我不会将降价文件放在 Gatsby 的 /pages 文件夹中，以避免潜在的问题。 Gatsby 是基于文件夹结构的路由，或者换句话说，Gatsby 推断 /pages 文件夹的内部结构来创建路由和路径，因此最好避免混合内容。
如果您相应地设置 gatsby-source-filesystem，您的页面可以存储在任何文件夹中。这将允许 Gatsby 从这些降价文件创建 GraphQL 节点。
我能够通过在降价文件中引用外部源来加载图像，但仍然无法通过文件路径访问它们♀️我仍在研究和解决这个问题
---
path: "/post-three"
date: "2020-11-23"
title: "My Third Gatsby Post"
description: "This is my third markdown post with gatsby"
category: "Tailwind"
author: "Nikki Peel"
authorImage: https://i.imgur.com/qyIekvV.png
image: https://i.imgur.com/lKnOCsT.jpg
---
我使用 Gatsby 和 Tailwind 为博客 posts 使用 markdown 构建了一个博客。使用 graphql 查询数据时，无法显示任何图像。我的图像存储在 images/ 文件夹中的 src/ 目录中。我的 post 位于同一目录中的 pages/ 文件夹中。有一次，该站点显示了所有图像，包括 markdown 中的图像，但在部署到 Netlify 时无法正常工作。我已经部署了网站，但现在 none 的图像正在显示，我已尽一切努力让它们恢复原状。我也尝试过使用 gatsby-image（固定和流动）但仍然没有。
这是我第一个使用 gatsby、markdown 和 graphql 的项目。目前，部署的站点 nikkipeel.netlify.app 在使用开发工具 (../images/example.jpg) 检查时在博客页面上显示了 posts 的正确路径，但实际上仍然没有图像显示。 ♀️
Github 回购：gatsby-blog
项目结构：
|-- /public
|-- /src
|-- /components
|-- /pages
|-- /post-one
|--index.md
|-- /post-two
|--index.md
|-- /post-three
|--index.md
|-- /templates
|-- blog-post.js
|-- /images
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js
博客的前文 post (index.md) -
---
path: "/create-a-blog-with-react-and-sanity"
date: "2021-01-10"
title: "Create a blog with React and Sanity"
description: "Create a technical blog built with React, TailwindCSS, and Sanity then deploy it using Github and Netlify"
category: "React"
author: "Nikki Peel"
authorImage: ../images/selfie.png
image: ../images/sanity-blog-collage.jpg
---
Blog.js 使用 Graphql 查询显示所有 posts:
import React from "react"
import { graphql } from 'gatsby'
import Layout from "../components/layout"
import Link from 'gatsby-link';
import SEO from "../components/seo"
const BlogPage = ({ data }) => (
<Layout>
<SEO title="Blog" />
<main className="bg-brown text-white h-auto p-12">
<section className="container mx-auto">
<h1 className="text-4xl mono pl-4">Latest Blog Posts</h1>
<h2 className="text-lg mb-12 pl-4">Welcome to my page of blog posts</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-center mx-auto md:gap-8 mb-24">
{data.allMarkdownRemark.edges.map(post => (
<article>
<Link to={post.node.frontmatter.path}>
<div className="block lg:h-64 relative leading-snug" key={ post.node.id }>
<img src={post.node.frontmatter.image} alt="" className="lg:block w-full items-center lg:h-full lg:object-cover lg:object-top relative lg:absolute"/>
<span className="block relative lg:h-full lg:flex lg:items-end ">
<h3 className="lg:bg-gray-800 lg:bg-opacity-75 text-white text-xl font-semibold lg:px-3 lg:py-4 rounded text-left">{post.node.frontmatter.title}</h3>
</span>
<div className="mt-4 mb-8">
<p className="text-base mb-4">{post.node.frontmatter.description}</p>
<span id={post.node.frontmatter.category} className="text-black font-semibold text-sm py-2 px-4 mr-2 rounded">{post.node.frontmatter.category}</span>
<small className="text-base ml-2">📅 {post.node.frontmatter.date}</small>
</div>
</div>
</Link>
</article>
))}
</div>
</section>
</main>
</Layout>
)
export const pageQuery = graphql`
query BlogIndexQuery {
allMarkdownRemark (sort: { fields: [frontmatter___date], order: DESC }){
edges {
node {
id
frontmatter {
path
title
description
date
category
image
}
}
}
}
}
`;
export default BlogPage;
对于单个帖子 - 博客-post.js:
import React from 'react';
import { graphql } from 'gatsby'
import Link from 'gatsby-link';
import Layout from '../components/layout';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
export default function Template({ data }) {
const post = data.markdownRemark
return (
<Layout>
<main className="container bg-brown min-h-screen p-4 md:p-12">
<Link to="/blog" exact className="text-white text-base items-center"><FontAwesomeIcon icon={faChevronLeft} className="mr-4"></FontAwesomeIcon> Back to Blog</Link>
<article className="container text-white mx-auto rounded-lg mt-4">
<header className="relative">
<div className="absolute h-full w-full flex items-center justify-center p-8">
<div className="bg-white text-brown bg-opacity-75 rounded p-4 md:p-12">
<h1 className="mono text-3xl mb-4">
{post.frontmatter.title}
</h1>
<div className="flex justify-center text-brown">
<img src={post.frontmatter.authorImage} alt="" className="w-10 h-10 rounded-full"/>
<p className="mono flex items-center pl-4 text-xl">{post.frontmatter.author}</p>
</div>
<p className="text-base font-semibold mt-4 text-center">Published on <strong>{post.frontmatter.date}</strong></p>
</div>
</div>
<img src={post.frontmatter.image} alt={post.frontmatter.title} className="w-full object-cover object-left-top rounded-t" style={{ height: "400px", width: "100%"}}/>
</header>
<div className="break-words px-4 lg:px-16 py-12 lg:py-20 prose lg:prose-xl max-w-screen leading-normal">
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</div>
</article>
</main>
</Layout>
)
}
export const postQuery = graphql`
query BlogPostByPath($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }){
html
frontmatter {
path
title
date
author
authorImage
image
}
}
}
`
使用 graphiql playground 时，会为 blog.js 检索正确的图像路径，但不会为 blog-post.js（个人 posts）检索正确的图像路径：
blog.js查询：
{
"data": {
"allMarkdownRemark": {
"edges": [
{
"node": {
"frontmatter": {
"path": "/customizing-the-scrollbar-with-css",
"title": "Customizing the Scrollbar with CSS",
"description": "Learn how to apply custom styling to the scrollbar on your project with pure CSS",
"date": "2021-01-28",
"category": "CSS",
"image": "../images/scrollbar.png"
}
}
},
博客-post.js查询：
{
"errors": [
{
"message": "Variable \"$path\" of required type \"String!\" was not provided.",
"locations": [
{
"line": 1,
"column": 24
}
],
"stack": [
"GraphQLError: Variable \"$path\" of required type \"String!\" was not provided.",
" at _loop (C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\graphql\execution\values.js:92:17)",
" at coerceVariableValues (C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\graphql\execution\values.js:119:16)",
" at getVariableValues (C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\graphql\execution\values.js:48:19)",
" at buildExecutionContext (C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\graphql\execution\execute.js:184:61)",
" at executeImpl (C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\graphql\execution\execute.js:89:20)",
" at execute (C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\graphql\execution\execute.js:64:35)",
" at C:\Users\npeel\Microsoft VS Code\gatsby-blog-main\gatsby-blog-main\node_modules\express-graphql\index.js:152:16",
" at runMicrotasks (<anonymous>)",
" at processTicksAndRejections (internal/process/task_queues.js:93:5)"
]
}
],
"extensions": {}
}
盖茨比-node.js-
我在此处将 'image' 和 'authorImage' 添加到 frontmatter 时收到错误消息
const path = require('path');
exports.createPages = ({actions, graphql}) => {
const { createPage } = actions
const postTemplate = path.resolve('src/templates/blog-post.js');
return graphql(`
{
allMarkdownRemark{
edges {
node {
html
id
frontmatter {
path
title
date
author
category
description
}
}
}
}
}
`).then(res => {
if(res.errors) {
return Promise.reject(res.errors)
}
res.data.allMarkdownRemark.edges.forEach(({node}) => {
createPage({
path: node.frontmatter.path,
component: postTemplate
})
})
})
}
// for RSS feed:
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}
盖茨比-config.js-
module.exports = {
siteMetadata: {
title: `Nikki Peel - Blog`,
description: `Technical blog created with Gatsby and Markdown`,
author: `Nikki Peel`,
siteUrl: `https://nikkipeel.netlify.app`,
},
plugins: [
`gatsby-transformer-remark`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-catch-links`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
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/blog-logo.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-feed`,
`gatsby-plugin-postcss`,
`gatsby-plugin-fontawesome-css`,
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
正如您在 documentation 中看到的那样，在处理 markdown plus 图像时，路径应该是相对于 markdown 文件本身的：
---
path: "/create-a-blog-with-react-and-sanity"
date: "2021-01-10"
title: "Create a blog with React and Sanity"
description: "Create a technical blog built with React, TailwindCSS, and Sanity then deploy it using Github and Netlify"
category: "React"
author: "Nikki Peel"
authorImage: /gatsby-blog/images/selfie.png
image: /gatsby-blog/images/sanity-blog-collage.jpg
---
来自post-一个：https://github.com/nikkipeel/gatsby-blog/blob/main/src/pages/post-one/index.md
应该变成：
---
path: "/create-a-blog-with-react-and-sanity"
date: "2021-01-10"
title: "Create a blog with React and Sanity"
description: "Create a technical blog built with React, TailwindCSS, and Sanity then deploy it using Github and Netlify"
category: "React"
author: "Nikki Peel"
authorImage: ../../images/selfie.png
image: ../../sanity-blog-collage.jpg
---
注意两个图像的相关性 (../../images/selfie.jpg)。这将允许 Gatsby 创建一个有效的 GraphQL 节点，并且它将在 GraphQL 游乐场 (localhost:8000/___graphql).
childImageSharp 节点。
Field "image" must not have a selection since type "String" has no subfields. This can happen if you e.g. accidentally added { } to the field "image". If you didn't expect "image" to be of type "String" make sure that your input source and/or plugin is correct.
与看起来不同，这是一个很好的错误，因为它指出 Gatsby 正在尝试从您的降价文件创建节点（即：您的路径现在已被很好地引用）并且您将能够使用 gatsby-image.根据 docs.
添加 gatsby-transformer-remark 和 gatsby-remark-images 插件。
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 800,
},
},
],
},
},
我不会将降价文件放在 Gatsby 的 /pages 文件夹中，以避免潜在的问题。 Gatsby 是基于文件夹结构的路由，或者换句话说，Gatsby 推断 /pages 文件夹的内部结构来创建路由和路径，因此最好避免混合内容。
如果您相应地设置 gatsby-source-filesystem，您的页面可以存储在任何文件夹中。这将允许 Gatsby 从这些降价文件创建 GraphQL 节点。
我能够通过在降价文件中引用外部源来加载图像，但仍然无法通过文件路径访问它们♀️我仍在研究和解决这个问题
---
path: "/post-three"
date: "2020-11-23"
title: "My Third Gatsby Post"
description: "This is my third markdown post with gatsby"
category: "Tailwind"
author: "Nikki Peel"
authorImage: https://i.imgur.com/qyIekvV.png
image: https://i.imgur.com/lKnOCsT.jpg
---