Using require with string works but with backticks throws error

Asked Mar 19 '18 at 18:43

Active Dec 09 '20 at 17:34

Viewed 525 times

So I am trying to load the image that the user saved for his/her profile. Trying to use this piece of code:

const imgUrl = '../../styles/img/profpic.png';
const profImg = require(`${imgUrl}`);

And then load the image in the render method as follows:

<img src={profImg} className="" alt={key + " profile pic"} />

When not using backticks, and putting the string in the require brackets, it does find the file within the require call and everything runs ok and loads the image. When using the backticks I get the following error:

Uncaught Error: Cannot find module '../../styles/img/profpic.png'.

Any idea why this is happening?

asked Mar 19 '18 at 18:43

Jorge Rodríguez González

Checkout the answers here: https://stackoverflow.com/questions/37241662/using-require-with-a-variable-vs-using-a-string-in-webpack/37241982. Seems like you can't use a relative path. – Chase DeAnda Mar 19 '18 at 18:47
Then I guess I need to save images in the public folder and link them in the src property as old times – Jorge Rodríguez González Mar 19 '18 at 19:24

Using require with string works but with backticks throws error

0 Answers0