1

我正在上传更少的代码，因为我认为它已经足够了
询问是否需要更多来查找错误

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 种不同的行为？

4

1 回答 1

0

您应该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`)}/>
于 2018-10-20T11:06:55.223 回答