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

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

0 голосов
/ 20 октября 2018

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

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 разных поведения?

1 Ответ

0 голосов
/ 20 октября 2018

Вы должны установить 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`)}/>
...