如何在 React.js 中按名称动态包含图像

Question

我正在实现语言 select，我需要添加标志。我已经尝试过标志的 Unicode 表情符号，但它们似乎不适用于 React 变量。现在我已经下载了所有必要标志的 png 图片。

我有一组具有名称和值属性的语言。值属性代表图像文件的区域设置代码和名称

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

你试试这个：

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

Answer 2

您可以使用一个对象，每个 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 }/>
)
...

如何在 React.js 中按名称动态包含图像

How to include images dynamically by names in React.js

import

image

lang

reactjs