Реагировать на ленивую загрузку изображения в компоненте, которому передается источник изображения как свойство - PullRequest
Новая
       71

Реагировать на ленивую загрузку изображения в компоненте, которому передается источник изображения как свойство

0 голосов
/ 17 июня 2020

У меня есть приложение React, созданное с помощью 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="" />

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 17 июня 2020

Я сначала импортировал изображение. 

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

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

Inside ProductPage. js

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

Это ссылка для импорта изображения: https://www.edwardbeazer.com/importing-images-with-react/

...