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]
   })
})

}

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

Import() in React - fires error in the Chrome/Firefox extensions

javascript

firefox-addon

google-chrome-extension

reactjs