反应中的图像加载

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 install file-loader --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`)}/>