Как импортировать изображение динамически - PullRequest
Новая
       105

Как импортировать изображение динамически

0 голосов
/ 01 мая 2019

Я использую url-loader для загрузки изображений на мою веб-страницу, конвертируя их в байты.

Вот мой нормальный случай, который отлично работает: 

import React from 'react';
import accountImg from '../../../../images/setting/account.png';
const Account =(props) => (
<div>
    <img src={accountImg} className="img-responsive" style={{"width":"100%"}} ></img>
</div>
 );
export default Account;

Но что, если мне нужен динамический импорт: 

    render() {
    return (
               <img  src={ "/images/headers/"+this.props.newsChannel.removeAllSpaces().toLowerCase()+".png"}></img>

    );

Так специально для этого случая: 

src={ "/images/headers/"+this.props.newsChannel.removeAllSpaces().toLowerCase()+".png"

Как динамически импортировать png?

Ответы [ 2 ]

1 голос
/ 02 мая 2019

Вариант 1: Ленивая загрузка изображения изнутри многоразового использования class component. Вы можете загружать изображения по их name и относительному пути к папке images из этой component; однако все равно требуется, чтобы все образы присутствовали во время выполнения и во время производственной компиляции . Другими словами, то, что у вас есть в папке images, - это то, что вы застряли, используя. 

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';

class LazyLoadImage extends Component {
  state = { src: '', err: '' };

  componentDidMount = () => {
    this.loadImage();
  };

  loadImage = async () => {
    try {
      const { default: src } = await import(/* webpackMode: "lazy" */ `../../images/headers/${this.props.name}.png`);
      this.setState({ src });
    } catch (err) {
      this.setState({ err: err.toString() });
    }
  }; 

  render = () => (
    <Fragment>
      <h5>Lazy Load Images</h5>
      <img src={this.state.src} alt="example.png" />
      {this.state.err && <p>{this.state.err} </p>}
    </Fragment>
  );
}

LazyLoadImage.propTypes = {
  name: PropTypes.string.isRequired,
};

export default LazyLoadImage;

Вариант 2: Идеальным вариантом будет создание микросервиса изображения или использование CDN, который обрабатывает все изображения. Все, что вам нужно сделать, это сохранить ссылку на изображение, например, вы бы сохранили string вроде: http://localhost:4000/uploads/image.ext (если вы используете CDN, это будет что-то вроде: https://i.imgur.com/foiVXpi.png). Клиент извлечет этот string (из базы данных) и сделает запрос GET к этой ссылке (когда HTTP string добавляется к src свойству img элемента - <img src="http://example.com/img.png" /> - он автоматически делает запрос GET на этот адрес).

Это обеспечивает наибольшую гибкость, поскольку вы можете очень легко добавлять / удалять / заменять изображения, просто изменяя эту строку (она также не обязательно должна находиться в папке images для загрузки); он также предлагает лучшую производительность - поскольку он переносит всю работу с изображениями с клиента на выделенный сервис. 

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

const ImageFromCDN = ({ src }) => (
  <Fragment>
    <h5>Image From CDN</h5>
    <img src={src} alt="example.png" />
  </Fragment>
);

ImageFromCDN.propTypes = {
  src: PropTypes.string.isRequired,
};

export default ImageFromCDN;
0 голосов
/ 01 мая 2019

Вы должны использовать redux / context, чтобы обернуть ваш компонент функции Account новыми состояниями и изменить изображение src realtime

...