javascript - 是否可以从字符串动态加载模块

目前，我正在使用以下代码使用Web Pack动态导入某些模块。

我想知道是否有避免切换的方法。
谢谢

import React from 'react'
import iconSend from './icon-send.png'
import iconReload from './icon-reload.png'
import iconDownload from './icon-download.png'
import iconAddDoc from './icon-add-doc.png'
import iconAddAgendaItem from './icon-add-agenda-item.png'

const loadIcon = (src) => {
  switch (src) {
    case 'iconSend':
      return iconSend
    case 'iconReload':
      return iconReload
    case 'iconDownload':
      return iconDownload
    case 'iconAddDoc':
      return iconAddDoc
    case 'iconAddAgendaItem':
      return iconAddAgendaItem
  }
}

const Option = ({id, name, isActive, src}) => {
  return (
    <div>
      <div>
        <img src={loadIcon(src)} alt={name} />
      </div>
    </div>
  )
}

export default Option

最佳答案

可能的方式：

1-使用require并在src中传递图像的确切名称，如下所示：

<img src={require(`./${src}`)} alt={name} />

src应该是：

icon-send.png
icon-reload.png
icon-download.png
icon-add-doc.png
icon-add-agenda-item.png

2-准备一个具有键名和图像的对象，使用该对象直接获取图像。

像这样：

import iconSend from './icon-send.png'
import iconReload from './icon-reload.png'
import iconDownload from './icon-download.png'
import iconAddDoc from './icon-add-doc.png'
import iconAddAgendaItem from './icon-add-agenda-item.png'

let hash = {
    iconSend,
    iconReload,
    iconDownload,
    iconAddDoc,
    iconAddAgendaItem
}

<img src={ hash[src] } alt={name} />

关于javascript - 是否可以从字符串动态加载模块，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46315972/