当我使用“Live Server”运行我的应用程序时,图像在我的本地服务器上看起来很好,但是在将相同的react/next应用程序部署到vercel后,公共文件夹中的图像无法正确渲染。
<div className="content">
<div className="cards">
{jsonData.map((info) => {
return (
<div className="card" key={info.id}>
<div className="card-head">
<img src="./06.png" />
<div className="icon-body">
<FiGithub className="git-icon" />
</div>
</div>
<h3>{info.name}</h3>
<div className="desc">{info.description}</div>
<div className="stack">{info.stack}</div>
</div>
);
})}
</div>
</div>
2条答案
按热度按时间anauzrmj1#
这是由于文件夹结构造成的。我以前遇到过同样的问题。
您可以添加类似于**/public/static/images**的结构,并将您的图像放入其中,如下所示:
9jyewag02#
所以我就自己解决了。首先,您应该检查您的图像是否加载到
.next/static/media/
文件夹中。每次保存时,该文件夹的作用类似于部署前项目的dist/
文件夹。我建议您使用与示例中相同的路径模块化地导入图像。我给你举个例子:
如果您看到文件名、散列和末尾的文件类型扩展名,您将知道它是否将在部署时加载。
例如,如果我加载06。png,它应该会在你的
.next/static/media/
文件夹中弹出这样的内容:06.f9e5c945.png
尝试部署,看看是否有效!如果是的话,如果你选择我的答案作为正确答案,我会非常感激,因为这将是我第一个接受的答案或StackOverflow!:)