Why doesn't require() function accept variables? [duplicate]

Question

I have an image tag:

<img :src="getImage(file.path)">

that dynamically requires an image src by calling this method:

getImage(value) {
  return require(value)
}

The problem is, it only works when I specify the string directly in the require() function.

I tested it by using a hardcoded value rather than the input value just to see what's going on. Could you please explain why does this below happens?:

Works

  getImage(value) {
    return require('C:/Users/name/Desktop/1.png')
  }

Doesn't work

  getImage(value) {
    var image = 'C:/Users/name/Desktop/1.png'
    return require(image)
  }

throws this error: Error: Cannot find module "."

So it doesn't allow me to use that input value because it only works with a string directly specified in the required()

---

UPDATE

If require() is not the way I should be loading images in JS, please could you tell me how do I do it in JS?

P.S. it's an Electron project, opened on localhost with webpack's server.

Answer 1

require does not run on the browser. It is compiled and therefore can't take a runtime variable. The link in the comments explains more.

What is this Javascript "require"?