为啥 require() 函数不接受变量？ [复制]

Posted 2023-03-08

【中文标题】为啥 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 动态加载图像，我在那里做错了什么？

【参考方案1】：

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

What is this Javascript "require"?

【讨论】：

那你能告诉我，我如何在 JS 中加载图像吗？我仍然使用:src="functionName(path)" 来加载图像吗？还是有更好的方法？

您的函数应该只将图像源作为字符串返回，浏览器将为用户加载它。我认为您也可以使用 Image 类在 js 中加载图像，但您可能不需要那个

我意识到我做错了，请您删除您的答案，这样我就可以删除问题，以免引起人们的困惑？