Import () в React - выдает ошибку в расширениях Chrome / Firefox

Question

У меня есть работающее приложение реакции, которое работает на localhost.Я использую метод 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]
   })
})

}