时间戳

首页 > 解决方案 > 在将图像源作为属性传递的组件中反应延迟加载图像

javascript - 在将图像源作为属性传递的组件中反应延迟加载图像

问题描述

我有一个用create-react-app. 它包含标准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="" />

任何帮助表示赞赏。

标签： javascriptreactjsfrontendlazy-loadingcreate-react-app

解决方案

我所做的是首先导入图像。

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/

推荐阅读