html - GatsbyJs - config.js からの読み取り時に画像レンダリングが機能しない

Question

で定義された画像の配列がありconfig.jsます。構成ファイルを使用すると、画像をレンダリングできませんが、生の HTML レンダリングは機能しています。

config.js

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

]

ポートフォリオ.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>
                    );
                })}

      );
 }