Загрузка изображения в реакции

Question

Я загружаю меньше кода, потому что я думаю, что это достаточно
Спросите, если нужно больше, чтобы найти ошибку

async componentDidMount(){


var image = this.props.data.img
console.log(this.props.data.img == './../images/thumbnails/g.png') // true
console.log(this.props.data.img === './../images/thumbnails/g.png') // true
console.log(typeof(this.props.data.img))
await import(image)
            .then((res)=>{
                console.log(res)
                this.setState({img:res})
            })
            .catch((e)=>{
                console.log(this.props.data.img)
                console.log(e)
            })
}

Я пытаюсь импортировать изображение.
Когда я использую import('./../images/thumbnails/g.png) затем он запускается успешно, но когда я передаю то же значение, что и реквизиты, и пытается импортировать его, то через ошибку (модуль не найден).
Я записываю значения, и все получаются, чтобы быть правдой, что средняя строка и строка по реквизитам одинаковы, тогда почему я получаю 2 разных поведения?

Answer 1

Вы должны установить file-loader в вашем приложении, затем используйте изображение в ваших файлах jsx/js/css.

установить file-loader используйте команду ниже:

npm установить загрузчик файлов --save-dev

И обнови свой webpack по следующему коду:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }
    ]
  }
}

Затем импортируйте ваш файл

import img from './file.png'

Для загрузки изображений на основе реквизита вы можете сделать следующее:

<img src={require(this.props.name)} alt=''/>

или же

<img src={require('../assets/images/yourimage.png')} alt=''/>

или же

<img src={require(`../assets/images/${this.props.name.toLowerCase()}.png`)}/>