如何解决GatsbyJS文件为空-设置relativePath不起作用
我正在尝试提取图像:/src/images/es.png
import React from "react"
import {
Header,Image,} from 'semantic-ui-react';
import { graphql } from 'gatsby'
import Img from 'gatsby-image'
import Layout from '@/components/layout'
import SEO from '@/components/SEO'
export const query = graphql`
query {
file(
relativePath: { eq: "images/es.png" },sourceInstanceName: {
eq: "images"
}
) {
childImageSharp {
# Specify the image processing specifications right in the query.
# Makes it trivial to update as your page's design changes.
fixed(width: 125,height: 125) {
...GatsbyImageSharpFixed
}
}
}
}
`
export default ({ data }) => (
<Layout>
<SEO title="Earthshaker" />
<div style={{ height: '100%' }}>
<Header
as="h1"
style={{
color: 'white',}}
>
Earthshaker
</Header>
{ JSON.stringify(data) }
{/* <Img fixed={data.file.childImageSharp.fixed} /> */}
</div>
</Layout>
)
这是配置代码:
plugins: [
{
resolve: `gatsby-source-filesystem`,options: {
name: `images`,path: path.join(__dirname,`src`,`images`),},`gatsby-transformer-sharp`,`gatsby-plugin-sharp`,
这是我的文件结构:
- src
- images
- es.png
- components
- heroes
- earthshaker <---- (this is the page code HERE)
我期望图像被拉出,但我总是得到file: null
。我在做什么错了?
解决方法
假设您的查询有效,我将您的文件系统路径更改为:
{
resolve: `gatsby-source-filesystem`,options: {
name: `images`,path: `${__dirname}/src/images/`,},
此外,我将检查查询以查看它是否在GraphQL游乐场(localhost:8000/___graphql
)中收集了预期的结果。其余代码看起来不错。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。