Search code examples
reactjswebpackloader

react webpack file-loader - variable in required url

I'm using webpack and the file-loader plugin. I wanna set an background-image in an react component, done like this:

let bgImageUrl = require(`../../images/image.jpg`);
let bgStyle = {backgroundImage: 'url(' + bgImageUrl + ')'};

<div className="calender__item__link" style={bgStyle} ></div>

This works fine. But when I replace bgImageUrl with a variable like this:

let bgImageUrl = require(`../../images/${event.image}`);

it's not working anymore: "Uncaught Error: Cannot find module './' at..."

Any ideas? Do I have to use the url-loader because I'm using 'url()'?

Thanks in advance.

Solution

  • Found the error: the variable ${event.image} was loaded via JSON. in a few cases, it has a string, in other it was empty. the empty ones are throwing an error.