images not loading in a react project using webpack 2

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,
  },
})

Possible duplicate of [Not able to display in reactjs getting an error as not found](https://stackoverflow.com/questions/41954807/not-able-to-display-in-reactjs-getting-an-error-as-not-found) — Shubham Khatri, Aug 02 '17 at 10:58

score 0 · Answer 1 · answered Aug 02 '17 at 10:08

0

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

answered Aug 02 '17 at 10:08

Axnyff

9,213
4
33
37

score 0 · Answer 2 · answered Aug 03 '17 at 10:14

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.

images not loading in a react project using webpack 2

2 Answers2