我正在使用Next JS来编码。我有一个图像数组,我想在我的应用程序中使用。
代码1
<Image src={require("../assets/image1.png")} />
when I code it like this, the image loads perfectly
但如果我尝试这个编码2
const path= "../assets/image1.png"
<Image src={require(path)} />
下一个js抛出一个错误代码,模块未找到。* 错误:无法找到模块""。
我甚至试过
<Image src={require(`"${path}"`)} />
我仍然得到一个错误。* 错误:无法找到模块"../assets/image1.png"*
我还尝试在路径前加一个反斜杠,例如const path = "/../assets/image1.png "*,这也会导致错误
NB:在所有三个示例中,图像的路径保持不变,但只有代码1可以工作。只要我把路径放在一个变量或数组中。任何帮助都将非常感谢?
1条答案
按热度按时间cgh8pdjw1#
我认为你想做的事情是不可能的。
require
不能处理动态路径。你能做到
但我建议将静态图像放在
public
文件夹https://nextjs.org/docs/basic-features/static-file-serving中您可以在图像组件中直接使用它们,只需传递路径即可。