问题描述
我使用 Gatsby 和 Tailwind 建立了一个博客，并使用 Markdown 来撰写博客文章。使用 graphql 查询数据时，我无法显示任何图像。我的图像存储在 src/ 文件夹中的 images/ 目录中。我的帖子位于同一目录中的 pages/ 文件夹内。该站点一度显示了所有图像，包括 Markdown 中的图像，但在部署到 Netlify 时无法正常工作。我已经部署了该站点，但现在我的图像都没有显示，我已经尝试了所有方法来恢复它们。我也试过使用 gatsby-image（固定和流动），但仍然没有。
这是我第一个使用 gatsby、markdown 和 graphql 的项目。目前，部署的站点 nikkipeel.netlify.app 在使用 devtools (../images/example.jpg) 检查时在博客页面上显示了帖子的正确路径，但实际上仍然没有图像显示。 ?♀️
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
---
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
---
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;
对于单个帖子 - blog-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（个人帖子）检索正确的图像路径：
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"
}
}
},blog-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": {}
}
gatsby-node.js -
我在此处将“图像”和“作者图像”添加到 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,})
}
}
gatsby-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`,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 加图像时，路径应该相对于 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
---
来自后一：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,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 游乐场 (childImageSharp) 中显示 localhost:8000/___graphql 节点。
“图像”字段不能有选择，因为“字符串”类型没有 子字段。如果您例如，这可能会发生不小心将 { } 添加到 字段“图像”。如果您不希望“图像”是“字符串”类型 确保您的输入源和/或插件正确无误。
与看起来不同，这是一个很好的错误，因为它表明 Gatsby 正在尝试从您的 Markdown 文件创建节点（即：您的路径现在已被很好地引用）并且您将能够使用 gatsby-image。根据{{3}}，我发现您缺少一些插件。
添加 gatsby-transformer-remark 和 gatsby-remark-images 插件。
`gatsby-plugin-sharp`,{
resolve: `gatsby-transformer-remark`,options: {
plugins: [
{
resolve: `gatsby-remark-images`,options: {
maxWidth: 800,},],我不会将 Markdown 文件放在 Gatsby 的 /pages 文件夹中以避免潜在问题。 Gatsby 是基于文件夹结构的路由，或者换句话说，Gatsby 推断 /pages 文件夹的内部结构来创建路由和路径，因此最好避免混合内容。
如果您相应地设置 gatsby-source-filesystem，您的页面可以存储在任何文件夹中。这将允许 Gatsby 从这些 Markdown 文件创建 GraphQL 节点。
我能够通过在 markdown 文件中引用外部源来加载图像，但仍然无法通过文件路径访问它们?♀️我仍在研究和解决这个问题
---
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
---