如何通过动态数据做出反应将图像加载到页面上？

Question

我想在我的 react 应用页面上显示一张图片

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']
    }