Question

我上传的代码较少，因为我认为它是enoug
询问是否需要更多代码才能发现错误

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)时，它会成功运行，但是当我传递与props相同的值并尝试导入该值时，则会通过错误（找不到模块）进行导入。
我记录值，并且所有结果都是正确的，这意味着字符串和道具字符串相同，然后为什么我会得到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`)}/>

图像加载反应

1 个答案: