javascript - React 中的 Import() - 在 Chrome/Firefox 扩展中触发错误

Question

我有一个在 localhost 上运行的有效 React 应用程序。我正在使用 import() 方法动态获取一些图片。它是一个循环，获取图片的 URL 并将其存储在 state 中。代码非常基础:

componentDidMount() {
  this.fetchPictures(items)
}

fetchPictures = (items) => {
  let imp = import(`path/whatever/items.path.png`)
    .then( image => {
       this.setState({
         images: [...images, image]
       })
    })
}

(为了简单起见，我简化了它并省略了循环部分)

非常基本的东西，这在 localhost 上运行良好。然而，我正在尝试构建的是一个浏览器扩展，在那里，它到达了 import() 所在的位置并向我报告错误:

TypeError: undefined is not a function
at Array.map (<annonymus>)
at r (.png$:22)
...

我已将 import() 放在 try-catch 中，是的，这确实是问题所在。

谁能告诉我是什么原因导致了这个问题？这与 Chrome 和 Firefox 的错误相同。

Answer 1

您可以使用导入方式

import mainLogo from'path/whatever/items.path.png';

你也可以使用 require 来渲染图片

fetchPictures = (items) => {
let imp = require('path/whatever/items.path.png')
.then( image => {
   this.setState({
     images: [...images, image]
   })
})