JS: Как динамически получать имена переменных
Я использую шаблон приложения create-response-app.
В одном из своих компонентов я импортирую путь к нескольким таким изображениям.
import iconAvatar from '../img/icon-avatar.png';
import iconHome from '../img/icon-home.png';
import iconVendor from '../img/icon-vendor.png';
Теперь предположим, что у меня есть такая переменная, которая определяет, какое изображение использовать.
let imageType = "avatar"; // or "home", or "vendor", etc.
Я хочу динамически отображать правильное изображение на основе значения imageType (без использования запутанной структуры if-else)
Что-то вроде следующего (разве что не сработает)
<img src = {"icon"}{imageType}/>
Как мне это сделать?
Как именно должен выглядеть выходной HTML? Мне известно, что в теге type нет атрибута img или в списках MDN как о доступных.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
У вас есть несколько вариантов:
Сначала используйте объект, предложенный @CertainPerformance
const images = {
avatar: require('../img/icon-avatar.png'),
home: require('../img/icon-home.png'),
vendor: require('../img/icon-vendor.png')
}
<img src = {images[imageType]} />
Или вы можете использовать оператор switch / if
switch (imageType) {
case 'home': return <img src = {iconHome} />;
case 'avatar': return <img src = {iconAvatar} />;
case 'vendor': return <img src = {iconVendor} />;
}
Спасибо за Ваш ответ! Я использую решение @fqhv с шаблонными литералами, поскольку оно немного чище.
Если все имена ваших файлов соответствуют этому стандарту, вы можете просто использовать конкатенацию строк.
<img src = {'../img/icon-' + imageType + '.png'} />
или еще чище с строковая интерполяция ..
<img src = {`../img/icon-{$imageType}.png`} />
Редактировать:
При использовании webpack вы должны использовать require, а при использовании require конкатенация строк не работает, однако интерполяция строк все еще работает. Так..
<img src = {require(`/img/icon-{$imageType}.png`)} />
См. этот ответ для получения дополнительной информации.
Это сработало: <img src = {require (/img/icon-{$imageType}.png)} /> Спасибо!
Все, что вам нужно сделать, это объединить, но вы можете рассмотреть возможность использования объекта, содержащего все изображения, а не трех независимых переменных.