Javascript Require似乎导致存在的模块找不到模块
目前正在尝试实现一个背景,该背景会根据组件接收到的道具进行更改,但我尝试的大部分内容似乎会导致错误或根本不显示背景 我似乎能够在react中设置背景的唯一方法是在url()内键入路径。任何其他尝试构建字符串的方法(如在公共路径的末尾添加图像名称)以及将字符串作为道具之一放入组件或仅将其作为道具传递给组件似乎都不起作用 以下是我的最新尝试:Javascript Require似乎导致存在的模块找不到模块,javascript,reactjs,Javascript,Reactjs,目前正在尝试实现一个背景,该背景会根据组件接收到的道具进行更改,但我尝试的大部分内容似乎会导致错误或根本不显示背景 我似乎能够在react中设置背景的唯一方法是在url()内键入路径。任何其他尝试构建字符串的方法(如在公共路径的末尾添加图像名称)以及将字符串作为道具之一放入组件或仅将其作为道具传递给组件似乎都不起作用 以下是我的最新尝试: getBackgroundURL () { var imageUrl = this.state.game.backgroundUrl;
getBackgroundURL () {
var imageUrl = this.state.game.backgroundUrl;
return { backgroundImage: "url(" + require(imageUrl) + ")" };
};
这是最近一次尝试收到的错误:
“错误:找不到模块”(A正确路径).jpg”
如果您对此有任何解决方法,请感谢您的帮助
在一些评论之后,我想我应该添加一些我已经尝试过但不起作用的其他东西
getBackgroundURL () {
var imageUrl = `../resources/${this.getGameName(false)}BackGround.jpg`;
return { backgroundImage: "url(" + require(imageUrl) + ")" };
};
这一个导致了上面相同的错误。
没有使用Require,我只接收不到任何背景图像
唯一似乎有效的方法
getBackgroundURL () {
return { backgroundImage: "url(" + require("../resources/GameNameBackGround.jpg") + ")" };
};
我找到了解决办法,
根据注释查看相对路径后。以下代码起作用:
getBackgroundURL () {
return { backgroundImage: "url(" + require(`../resources/${this.getGameName(false)}BackGround.jpg`) + ")" };
};
这与上面尝试的不同之处在于,相对路径放在函数中,而不是放在变量中,并将变量放在返回中
不确定这有什么区别,但它起了作用。感谢大家的帮助。这里有必要使用
require
吗?我的意思是,如果backgroundUrl只是路径,必须包含在最终样式中,就不可能只使用{backgroundImage:“url”(+imageUrl+)}
?为什么不使用相对路径而不是require,例如。/path/to/folder/${imageUrl}
@JaxCze如果没有要求,我似乎得到了一个空的背景,用我尝试过的一些例子更新了我的问题。@SultanH.尝试过,但发现有相同的问题。更新了我的问题,包括我所做的尝试。您可以将此标记为问题的正确答案,让其他似乎有相关问题的人了解这一点作为可能的解决方案,干得好!