来自 json 的 Gatsby 图像路径

Posted 2023-03-08

【中文标题】来自 json 的 Gatsby 图像路径

【英文标题】：Gatsby image path from json

【发布时间】：2019-03-05 14:23:21

【问题描述】：

编辑：得到它的工作，即使这样感觉有点不对。任何可以只使用文件名而不是相对路径的想法将不胜感激。无论如何，这就是我的工作方式：

数据.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/data.json

[
        
          "slug": "sock1",
          "name": "sock1",
          "image": "socks1.jpg"
        
] 

如果我不提供纯文件名，而是为它工作的网络上的任何图像提供一个 url。尝试让它按如下方式工作：

gatsby-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 等）

任何指针将不胜感激！ :)

【参考方案1】：

您的查询应该与此类似：

export const productsQuery = graphql`
  query 
    allDataJson 
      edges 
        node 
          slug
          name
          image
            publicURL
            childImageSharp
              fluid 
                ...GatsbyImageSharpFluid
              
            
          
        
      
    
  
`

然后你可以像这样输出路径：

<img src=node.image.childImageSharp.fluid.src />

你不用流体，你用其他types of responsive images

【讨论】：

他问如何在JSON文件中使用相对路径替换绝对路径。