Question

我想在我的反应应用页面上显示图片

import egypt from '../images/egypt.svg'

<div>
   <img src={egypt}/>
</div>

这是正确的方法吗？

另外我想从像这样的对象加载它：

options: [{
       optionOne: {
         answer: 'bolivia',
         image: './images/egypt.svg'
       }
     }]

如何在屏幕上显示它？

我的错误是说我需要一个合适的加载器。我试着用这个：https://www.npmjs.com/package/image-webpack-loader

但它说：Can't resolve 'file-loader'

  {
    test: /\.svg$/i,
    loaders: [
        'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
  }

Answer 1

如果

import egypt from '../images/egypt.svg'

<div>
   <img src={egypt}/>
</div>

适用于您的代码并且您已正确配置了webpack，您可以通过在模板文字的帮助下（例如

）要求它们在React中动态显示图像

<img src={require(`${obj.optionOne.img}`)}

还要确保使用命令

安装url loader

npm install -s url-loader

您需要将webpack与url-loader配置为

 {
        test: /\.(jpe?g|png|gif|svg)$/,
        use:['url-loader']
    }

如何使用动态数据反应将图像加载到页面上？

1 个答案: