使用webpack 2在反应项目中加载的图像

Question

我正在尝试渲染这样的图像，但它们在页面上显示为损坏的图像。

...
return (
  <img src='/public/images/ic-account-circle-black-24-px-5.png' alt='uimg' />
)

这是我用于处理图像文件的webpack配置：

config.module.rules.push({
  test    : /\.(png|jpg|gif)$/,
  loader  : 'url-loader',
  options : {
    limit : 8192,
  },
})

Answer 1

我认为默认情况下webpack不会检测JSX中的图像src。您需要使用require

明确说明它

https://github.com/petehunt/webpack-howto/issues/11

Answer 2

您需要要求webpack的图片使用url-loader

解决它

Example

var AccountCircle = require('src/images/ic-account-circle-black-24-px-5.png');

class Component extends React.Component {
   render() {
     return (
       <img src={AccountCircle} />
     )
   }
}

Webpack将使用require解析url-loader，将其移至目标文件夹并自动插入网址。