Импорт изображения в тег <src>в React.js, когда имя изображения заранее неизвестно

Question

У меня есть компонент в React, который отображает (или не отображает) изображение в теге src.

Путь к файлу и имя файла изображения передаются через реквизиты после выбора пользователем, поэтому я не могу выполнить импорт в верхней части файла. По-видимому, я должен быть в состоянии сделать что-то вроде src = {require (file)}, но это заставит webpack выбросить шипящий фит и выдать следующую ошибку: Ошибка: не удается найти модуль "."

Например, типичный путь к файлу / имя файла, который я передаю компоненту: '../../../images/black.jpg'

Это сокращенная версия рассматриваемого кода:

    import React, { Component } from "react";

class DisplayMedia extends Component {
  render() {
    return (
        <div className="imgPreview">
        <img src={this.props.file} alt="piccy" />
        </div>
    );
  }
}

export default DisplayMedia;

Answer 1

В зависимости от настроек ...

Если изображения являются динамическими (в процессе производства изображения будут добавляться, редактироваться или удаляться) : я бы порекомендовал микросервис, которыйобрабатывает только изображения.Я подробно расскажу о том, как приблизиться к такому сервису: Изображение, возвращаемое из REST API, всегда отображает поврежденный

Если изображения статичны (во время производства изображения объединяются вфайл "bundle.js") : - Я бы порекомендовал импортировать все изображения в компоненте, создать массив импортированных изображений, а затем использовать индекс массива и состояние реакции для их циклического переключения.Например:

import React, { Component } from "react";
import Image1 from "../images/Image1.png";
import Image2 from "../images/Image2.png";
import Image3 from "../images/Image3.png";

const images = [Image1, Image2, Image3];

export default class ShowImage extends Component {
  state = { index: 0 };

  handleChange = ({ target: { value } }) => {
    this.setState({ index: value });
  };

  render = () => (
    <div className="container">
      <h1>Utilizing Array Indexes</h1>
      <select
        style={{ marginBottom: 20 }}
        value={this.state.index}
        onChange={this.handleChange}
      >
       {images.map((val,idx) => (
         <option key={idx} value={idx}>Image {idx + 1}</option>
       ))}
      </select>
      <img src={images[this.state.index]} />
    </div>
  );
}

Хотя я не могу создать точные коды и коробку из вышеперечисленного, этот рабочий пример должен дать вам основную идею: https://codesandbox.io/s/ovoo077685

Answer 2

Вам не нужно добавлять require в src.Когда используется относительный путь, он будет доступен для загрузки на вашем сервере, но при задании URL будет загружено изображение.Вы можете найти больше информации здесь

При использовании src в качестве /images/black.jpg он преобразуется в localhost: 3000 / images / black.jpg