为什么 require() 函数不接受变量？ [复制]答案

【问题标题】：Why doesn't require() function accept variables? [duplicate]为什么 require() 函数不接受变量？ [复制]
【发布时间】：2018-07-24 09:50:58
【问题描述】：

我有一个图片标签：

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

通过调用这个方法动态地需要一个图片src：

getImage(value) {
  return require(value)
}

问题是，它只在我直接在require() 函数中指定字符串时才有效。

我使用硬编码值而不是输入 value 对其进行了测试，只是为了看看发生了什么。您能否解释一下为什么会发生这种情况？：

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

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

抛出此错误： Error: Cannot find module "."

因此它不允许我使用该输入 value，因为它仅适用于直接在 required() 中指定的字符串

更新

如果require() 不是我应该在 JS 中加载图像的方式，请你告诉我如何在 JS 中做到这一点？

P.S.这是一个 Electron 项目，在 localhost 上使用 webpack 的服务器打开。

【问题讨论】：

不，require 与 javascript 语言无关 - 请阅读该链接中的答案
这是一个 Webpack 问题，而不是纯粹的 JS 问题。 This question 可能会有所帮助。
@Un1：它可能是编译为 JS 的某种语言的一部分，或者是您正在使用的任何 JS 库的一部分（尽管在这种情况下，字符串是文字还是变量），但它不是 JS 的一部分。
也许它可以帮助你github.com/facebook/react-native/issues/6391。如果你想动态加载图片，你应该在服务器上发送 http 请求并从服务器端获取图片。
伙计们，这是一个电子应用程序，没有服务器，我只是想用 JS 动态加载图像，我在那里做错了什么？

标签： webpack

【解决方案1】：

require 不在浏览器上运行。它已编译，因此不能采用运行时变量。 cmets 中的链接解释更多。

【讨论】：