【问题标题】:require(variable) causes the error Cannot find module "."require(variable) 导致错误找不到模块“。”
【发布时间】:2018-12-24 12:36:23
【问题描述】:

我正在使用 React 和 Node.js,我正在尝试使用存储为 prop 的 src 属性来渲染图像。但是,每当我尝试向require() 提供存储为变量的路径时,它都会给我此错误:找不到模块“。”

所以我想知道为什么 require 不能处理指向路径但可以处理路径本身的变量?比如这会导致上面提到的错误:

<MyComponent imageSrc='./image.jpg'/>
...
<img src={require(this.props.imageSrc)}/>

但这将完美地工作:

<img src={require('./image.jpg')}/>

【问题讨论】:

  • console.log(this.props.imageSrc) 的输出是什么?
  • Require 要求文件是带有 module.exports 的节点文件。图像没有,因为它是 JPG 文件。但是,如果图像在您的公共目录中,则不需要要求图像才能显示它。
  • 你为什么不这样使用它:&lt;MyComponent imageSrc={require("./image.jpg")} /&gt; 然后&lt;img src={this.props.imageSrc) /&gt; 正如@RyanZ 解释的那样,实际上你不需要这里的图像。
  • @devserkan,谢谢。那行得通。
  • 不客气。然后我会将此评论转换为您正在寻找的答案。

标签: node.js reactjs require


【解决方案1】:

正如 cmets 中所解释的那样,实际上您在这里不需要任何图像。您可以在 src 目录中使用相对路径。但是,对于您的情况,这将起作用:

将 prop 传递给组件时使用 require:

<MyComponent imageSrc={require("./image.jpg")} />

并在那里使用这个道具:

<img src={this.props.imageSrc} />

我最近学到的另一种解决方案:

<img src={require( "" + this.props.imageSrc) } />

【讨论】:

  • 你能解释一下为什么添加一个空字符串可以解决这个问题吗? require(src) 给我造成了这个错误。 require("" + src) 有效。这对我来说毫无意义。
  • @DaveStein,我知道这很奇怪 :) 它将变量与空字符串连接起来,因此返回一个字符串。这就是 require 所期望的:一个字符串。
猜你喜欢
  • 2015-03-26
  • 2015-09-29
  • 1970-01-01
  • 1970-01-01
  • 2017-10-11
  • 2016-03-15
  • 2020-05-11
  • 2021-01-08
  • 2020-06-22
相关资源
最近更新 更多