0

I am struggling to show local images in my react app. I am calling the image inside my render method using the require() function, like so:

<img src={require('../../assets/svg/ic_planning.svg')} />

Not even importing images work, like:

import icon from '../../assets/svg/ic_planning.svg'
<img src={icon} />

And on my webpack.config.js I have the following rules for image loading:

{
    test: /\.(jpg|png|svg)$/, 
    loader: 'url-loader',
    options: { limit: 10000 }
},
{
    test: /\.(jpg|png|svg)$/,
    loader: 'file-loader', 
    options: { } // name: '[path][name].[hash].[ext]' 
},

Both url-loader and file-loader dependencies have ben installed. I had the name option inside file-loader options but I commented it to test, with no success. Not even jpg images are showing.

Webpack is building images with no error outputs and no error shows up in the dev console on chrome, but I still get that not loaded image icon on my page. I know there is a similar question from 2 years ago and it seems to me that I did everything I'm supposed to do to load local images.

Here's the webpack log if it helps:

enter image description here

I'm not sure what other informations might help to figure out what's going on so let me know what I need to post here. Thank you all in advance for any help provided.

Gabriel Schneider
  • 605
  • 2
  • 6
  • 12
  • What is the `src` of the image that is rendered on the page? Can you access that file directly in your browser? – sliptype Mar 23 '18 at 20:16
  • When I try to open the src that appears when I inspect the element I get an error message saying the document is empty, here's the link: data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJjbGllbnQvc3JjL2Fzc2V0cy9zdmcvaWNfcGxhbm5pbmcuZTJiNjM0ZmY2MWRiMjI1ZTBlMmQyM2MwZjIyOWUwY2Uuc3ZnIjs= – Gabriel Schneider Mar 23 '18 at 20:18
  • @sklingler93 was that what you meant? – Gabriel Schneider Mar 23 '18 at 20:21
  • There's an error in your regex patterns for your loaders, you need to escape the dot in order to make it work, your test pattern should look like `/\.(jpg|png|svg)$/` please consider change it and try again – Rodrigo Ferreira Mar 23 '18 at 20:22
  • @RodrigoFerreira I fixed it and built webpack again but the error persists – Gabriel Schneider Mar 23 '18 at 20:25
  • @GabrielSchneider Can you try using an `svg` element instead of `img`? – sliptype Mar 23 '18 at 20:27
  • @sklingler93 I could but this svg is kinda complex and I have other svgs that I would like to use. The thing that is bugging me is that not even jpg is loading... – Gabriel Schneider Mar 23 '18 at 20:30

1 Answers1

0

What version of the Webpack you are using? If you are using 3 or 4, please try this configuration. This works for me.

{ test: /\.(png|jpg|svg)$/, use: [{ loader: 'url-loader', options: { limit: 
8192 } }] }
Kevin
  • 1,271
  • 9
  • 14