Невозможно использовать переменную JavaScript в запросе для динамического импорта в React
Я использую react-google-maps, но думаю, что мой вопрос относится к общему случаю пользователя. Я хочу динамически загружать значок, используя URL-адрес, переданный в качестве реквизита. Но я обнаружил, что если я использую переменную, я получаю сообщение об ошибке. Пожалуйста, смотрите ниже:
Когда мне требуется иконка с использованием строки, она отлично работает, например.
icon = {require('../assets/myPng.png')}
Но если мой путь png является переменной, например
let url = '../assets/myPng.png'
icon = {require(`${url)`}
Я получаю сообщение об ошибке:
cannot find module '../assets/myPng.png'
Кто-нибудь может сказать мне, что происходит?
если я использую icon = {require(url}, это тоже не работает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Лучше использовать require(...), тогда путь будет управляться вашим менеджером пакетов. Если вы используете строку напрямую, она будет пропущена, и вы получите ошибку. Я бы посоветовал использовать:
const icon = require('../assets/myPng.png')
// ...
<MapComponent icon = {icon} ... />
почему бы не просто const { icon } = require('../assets/myPng.png'); ?
Потому что require(...) обычно возвращает строку при использовании на картинке, а не на объекте. Вы получите undefined здесь.
Спасибо за ваши комментарии, но мне нужно, чтобы require(...) использовала переменную и динамически загружала значок в зависимости от пользователя, я не могу использовать жестко заданную строку. Я вижу npm dynamic-import и попробую это, но после дальнейшего изучения кажется невозможным динамически требовать что-то так, как я хочу - к сожалению, я не могу использовать импорт.
Ну, импорт можно использовать динамически, см. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Возможно, стоит изучить эта техника, если вы хотите иметь динамический импорт.