Как динамически включать изображения по именам в React.js

Question

Я использую выбор языка, и мне нужно добавить флаги. Я попробовал смайлики флагов в Юникоде, но они не работали с переменными React. Теперь я скачал png-изображения всех необходимых флагов.

У меня есть массив языков со свойствами имени и значения. Свойство Value также представляет код локали и имя файла изображения

languages: [
  {
    name: 'Swedish',
    value: 'sv_SE'
  },
  {
    name: 'English',
    value: 'en_US'
  },
  ...
]

У меня также есть операторы импорта:

import sv_SE from './flags/sv_SE.png'
import en_US from './flags/en_US.png'

и мой тег img выглядит следующим образом:

languages.map((lang) => (
   <img src={ sv_SE } alt={ lang.value }/>
)

На данный момент он показывает единственный флаг Швеции. Но я хочу получить флаг по значению элемента массива Можете ли вы предложить какие-либо варианты, которые я могу использовать? Спасибо за ваше терпение!

Answer 1

Вы можете использовать объект с каждой ссылкой на imageSource одним и тем же ключом!

import sv_SE from './flags/sv_SE.png'
import en_US from './flags/en_US.png'

const flags = {
  sv_SE,
  en_US
}

...
languages.map((lang) => (
   <img src={ flags[lang.value] } alt={ lang.value }/>
)
...

Answer 2

Вы попробуйте это:

languages.map((lang) => (
   <img src={ `./flags/${lang.value}.png` } alt={ lang.value }/>
)