Edit: Got it working 即使这种方式感觉有点错误 . 任何想法都可以只使用文件名而不是相对路径,我们将不胜感激 . 无论如何,这是我如何工作:
data.json
[
{
"slug": "bloom",
"name": "Bloom",
"image": {
"src": "../images/socks1.jpg"
}
}
]
查询:
{
allDataJson {
edges {
node {
slug
name
image {
src {
childImageSharp {
fluid {
src
}
}
}
}
}
}
}
}
我试图显示一个图像,其名称存储在data.json中,文件本身在src / images中
SRC /数据/ data.json
[
{
"slug": "sock1",
"name": "sock1",
"image": "socks1.jpg"
}
]
如果不是纯文件名,我提供网站上任何图像的网址 . 尝试让它工作如下:
盖茨比-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `data`,
path: `${__dirname}/src/data`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-json`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
],
}
product.js
import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'
import get from 'lodash/get'
class ProductPage extends React.Component {
render() {
const products = get(this, 'props.data.allDataJson.edges')
console.log(products)
return (
<Layout>
{products.map(({ node }) => {
return (
<div key={node.name}>
<p>{node.name}</p>
<img src={node.image} />
</div>
)
})}
</Layout>
)
}
}
export default ProductPage
export const productsQuery = graphql`
query {
allDataJson {
edges {
node {
slug
name
image
}
}
}
}
`
所有在前端输出的都是
<img src="socks1.jpg">
如果我查询GraphiQl中的所有文件,我得到它们,但是(不确定这个)我认为图像字段不被识别为文件类型字段(对于src等无法查询)
任何指针将非常感谢! :)