Gatsby Js - рендеринг изображений не работает при чтении из конфигурации. js - PullRequest
Новая
       17

Gatsby Js - рендеринг изображений не работает при чтении из конфигурации. js

0 голосов
/ 25 апреля 2020

У меня есть массив изображений, определенный в 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>
                    );
                })}

      );
 }

1 Ответ

0 голосов
/ 25 апреля 2020

Не импортируйте ваш JSON напрямую. Вместо этого, используйте источник gatsby-source-filesystem и преобразуйте его с помощью gatsby-transformer- json. Чтобы Gatsby автоматически преобразовывал пути изображений, найденные в JSON, в фактические файловые узлы, эти пути должны быть связаны с файлом JSON, в котором они находятся. Это позволит вам использовать хранилище graphql Gatsby для извлечения ваших данных.

Добавьте gatsby-transformer-sharp к миксу, и вы сможете использовать компонент gatsby-image для рендеринга идеально оптимизированных изображений с отложенной загрузкой. Подробнее об этом здесь .

...