Vue.js dynamic image src with webpack require() not working

I finally figured it out!! Webpack cannot import the file if its name is completely given as a variable like:

require(imageUrl) // doesn't work

This is because it doesn't know the path at compile time if the path is stored in a variable.

But Webpack can detect files to bundle when it is given a string interpolation in require() like:

require(`../assets/profile_screens/${filename}`) // Works

This works because Webpack knows the path "../assets/profile_screens" at compile time so it can include all the files inside the folder.