визуальная студия реагирует на путь изображения

Question

Итак, у меня есть визуальный студийный проект, созданный с помощью response.js.

Я пытаюсь связать изображение динамически, но не удается.Вот код, который я пытаюсь:

Вверху я устанавливаю переменную для первой части пути:

this.LogoPath = '../images/'

И затем я динамически извлекаю имя изображения изAPI вызов.

this.setState({ imageNamePath: this.state.location.imageName })

И затем я объединяю их:

{`${this.LogoPath}${this.state.location.imageName}`}

В консоли я получаю:

img src='../images/the-images-name-here.png'

Так что, похоже, работает,но это не так.Я не получаю ошибок, и у меня есть испорченные изображения.Мое лучшее предположение заключается в том, что реакция заключается в изменении изображений на что-то вроде:

image-name-here.6a131799.png

Конечно, кто-то сталкивался с этим раньше, но мой поиск в Google немного затормозилhelp.

Так как мне заставить изображения отображаться?

Answer 1

Webpack - это умный инструмент.Одной из его сильных сторон является удаление мусорного кода / файлов из пакета.

Это означает, что если файл не импортируется с использованием import myFile from '../myPath/myFile.jpg'; или require ('../ myPath / myFile.jpg'); `он не будет частью окончательного комплекта.

В вашем случае вы не импортируете файл.Вместо этого вы создаете строковую переменную, которая ничего не значит для веб-упаковки.

В вашем случае могут работать различные параметры:

Опция 1: Предварительный импорт всехизображений и сопоставьте их в объекте:

import React, {Component} from  'react';
import image1 from '../assets/image1.png';
import image2 from '../assets/image2.png';
import image3 from '../assets/image3.png';

const imageTypes = {
  image1,
  image2,
  image3,
}

export default class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imageType: 'image1'
    }
  }

  render() {
    return (
      <img src={imageTypes[this.state.imageType]} />
    )
  }
}

Вариант 2: Не рекомендуется - Используйте параметр require для динамического импорта файлов (могут потребоваться конфигурации веб-пакета для включения всех возможных требуемых изображений врабочий комплект):

class MyComponent {
  constructor(props) {
    super(props);
    this.state = {
      image: 'file1.png'
    }
  }

  render() {
    return (
      <img src={require(`./assets/${this.state.image}`)} />
    )
  }
}

Вариант 3: Отправка BLOB-изображения (в base64) из API.

Я предлагаю использовать Вариант 1 или Вариант 3 , в зависимости от ваших требований, таких как: как часто будут изменяться / добавляться / удаляться изображения.Динамический импорт файлов из пакета ReactJS не является нормальным, и в вашем проекте может оказаться несуществующее изображение, запрошенное данными, поступающими из внешнего источника.

Для Вариант 2 у вас также могут возникнуть проблемы с настройкой веб-пакета, чтобы включить в пакет все изображения, которые вам, вероятно, понадобятся для рендеринга, даже если они не импортированы (жестко закодировано) где-то в файлах JS.Имейте в виду, что приложение React в работе становится набором статических файлов.Вам нужно обращаться с ними следующим образом.