图像未使用Webpack 2加载到React项目中

Question

I'm trying to render images like this but they're showing up as broken images on the pages.

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

Here is my webpack config for handling image files:

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

Answer 1

I think webpack by default doesn't detect image src in JSX. You need to be explicit about it with a require

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

Answer 2

You need to require the image for webpack to resolve it using the 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 will resolve the require using the url-loader , move it to your destination folder and automatically insert the url.