ReactJS Redux Загрузка изображения динамически из переменной - PullRequest
Новая
       9

ReactJS Redux Загрузка изображения динамически из переменной

0 голосов
/ 27 февраля 2019

В настоящее время я работаю над проектом React + Redux и хотел использовать языковые сообщения для визуализации изображения.

Проблема в том, что, поскольку имя изображения является динамическим (из-за переключения языка), я не могу использовать require(imageVar) для загрузки изображения.

С чем я сейчас работаюэто (это внутри функции render ()): 

FormattedMessage {...messages.fullLogo}>
        {
          (fullLogo) => <Img src={require(`${fullLogo}`)} alt="Banner" />
        }
</FormattedMessage>

Теоретически это должно загрузить изображение из URL (да fullLogo - это полный URL-адрес изображения).

То, что я пробовал внутри src = {}, было: 

require(`${fullLogo}`)
require(fullLogo)
require("" + fullLogo)
require(String(fullLogo))
require(fullLogo.toString())

Каждый раз, когда я пробую один из них (кроме 3-го - я получаю фатальную ошибку), я получаю ошибку "Could not Load Module './img/image.png'".

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

Однако, если я поместил путь непосредственно в функцию require().Он успешно загружает изображение.

Я не хочу этого, хотя.Я хочу, чтобы он загружался динамически.

Может быть, у вас, ребята, есть некоторый опыт с этим.

Заранее спасибо!

PS: Если вам нужен дополнительный код, дайте мне знать!

1 Ответ

0 голосов
/ 27 февраля 2019

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

В зависимости от того, как работает упаковщик, это не возможно с помощью require.Упаковка происходит один раз перед выполнением, поэтому эти переменные еще не имеют значений.

Что вы подразумеваете под переключением языка?Что содержит message.fullLogo?Если он содержит url, просто используйте этот url без require:

...