Question

我在config.js中定义了一个图像数组。使用配置文件时，我无法渲染任何图像，但是原始HTML渲染正在工作。

config.js

 portfolioEntry: [
    {
        image: '../assets/images/portfolio/solo2.jpg',
        service: 'Service text',
        address: 'The address'
    },
   {}
  ...

]

portfolio.js

import React from "react";
import config from "../../config";
import solo2 from "../assets/images/portfolio/solo2.jpg";  // using this, it is working fine

export default function Portfolio() {
      return (
            {config.portfolioEntry.map((portfolio, idx) => {
                    const {image, service, address} = portfolio;
                    console.log(portfolio);
                    return (
                        <div className="box" key={idx}>
                            <div className="imgBx">
                               // this is working fine
                                <img className="img-fluid" src={solo2} alt="not showing"/>

                               // these is not working
                                <img className="img-fluid" src={image} alt="not showing"/>
                                <img className="img-fluid" src={{image}} alt="not showing"/>
                            </div>
                            <div className="content">
                                <h3>{service}</h3>
                                <p>{address}</p>
                            </div>
                        </div>
                    );
                })}

      );
 }

Answer 1

不要直接导入JSON。取而代之的是，使用gatsby-source-filesystem进行源化，并使用gatsby-transformer-json对其进行转换。为了让Gatsby自动将JSON中找到的图像路径转换为实际的文件节点，这些路径应相对于它们所在的JSON文件。这将允许您使用Gatsby的graphql存储提取数据。

将gatsby-transformer-sharp添加到混合中，您将可以使用gatsby-image组件通过延迟加载来呈现完美优化的图像。 here的更多内容。

GatsbyJs-从config.js读取时图像渲染不起作用

1 个答案: