在作为属性传递图像源的组件中响应延迟加载图像

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/

Answer 2

所以你可以在你的

ParentComponent

中导入图像

import React from 'react';
// import the image
import myImage from "../assets/images/myImage.png";

const ParentComponent = (props) => (
  <ChildComponent imageUrl={myImage}/>
);

export default ParentComponent;

在

ChildComponent

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

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

        <LazyLoad height={200}>
            <img src={props.imageUrl} alt="" />
        </LazyLoad>

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

        </div>
);

export default ChildComponent;

我还建议您使用 - react-lazy-load-image-component 包它在语法上令人愉悦并且具有更好的功能

使用

'react-lazyload'

import LazyLoad from 'react-lazyload';
<LazyLoad height={200}>
    <img src={props.imageUrl} alt="" />
</LazyLoad>

使用

'react-lazy-load-image-component'

import { LazyLoadImage } from "react-lazy-load-image-component";
import 'react-lazy-load-image-component/src/effects/blur.css';
<LazyLoadImage className="w-full" src={props.imageUrl} alt="" effect="blur" width="30vw" height="40vh"/>

您还可以在加载图像时添加占位符图像或模糊等效果。

希望我理解并正确回答了您的问题！