GatsbyJs - image rendering not working when reading from config.js

Question

I have an array of image defined in config.js. when using the config file, I am not able to render any image, however raw HTML rending is working.

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>
                    );
                })}

      );
 }

score 0 · Answer 1 · answered Apr 25 '20 at 16:00

Don't import your JSON directly. Instead, source it using gatsby-source-filesystem and transform it with gatsby-transformer-json. In order for Gatsby to automatically transform image paths found in JSON to actual file nodes, those paths should be relative to the JSON file they are found in. This will allow you to use Gatsby's graphql store to pull your data.

Add gatsby-transformer-sharp to the mix and you will be able to use the gatsby-image component to render perfectly optimized images with lazy-loading. More on that here.

GatsbyJs - image rendering not working when reading from config.js

1 Answers1