在將圖像源作為屬性傳遞的組件中反應延遲加載圖像

Question

我有一個使用create-react-app的 React 應用程序。 它包含標准的src/目錄，我創建了一個src/assets/home/目錄，其中保存了我打算在項目中使用的圖像文件。 我不確定如何在我的應用程序的組件中正確引用圖像。

我有以下組件，我傳遞了一組屬性，其路徑為src/scenes/Home/InfographicSection/InfographicBlock/InfographicBlock.js ：

        <InfographicBlock
            title="Some Title"
            description="some text"
            imgPath="../../../../assets/home/home-logo.png"
        />

InfographicBlock 使用庫react-lazyload ( https://www.npmjs.com/package/react-lazyload )：

import React from 'react';
import LazyLoad from 'react-lazyload';

const InfographicBlock = (props) => (
        <div className="infographic-block columns">

        <LazyLoad height={200}>
            <img src={require(`${props.imgPath}`)} alt="" />
        </LazyLoad>

            <div className="content-container column">
                <h2 className="subtitle">{props.title}</h2>
                <p>{props.description}</p>
            </div>

        </div>
);

export default InfographicBlock;

如果我將字符串路徑直接添加到圖像標記中，圖像引用效果很好，如下所示：

<img src={ require('../../../../assets/home/home-logo.png') } />

但是，鑒於這是一個組件，我想將該屬性作為變量傳遞以重用該組件。

我已經嘗試過這種變體但沒有成功：

<img src={require(`${props.imgPath}`)} alt="" />

任何幫助表示贊賞。

Answer 1

我所做的是首先導入圖像。

import product1 from './Images/female_sport3.jpg'

<ProductPage currency={currency} currencyRate={currencyRate} product1={product1}></ProductPage>

ProductPage.js 內部

const {currency, currencyRate, product1} = props
<img src={product1} alt=""></img>

這是導入圖像的參考： https://www.edwardbeazer.com/importing-images-with-react/