next.js Vercel部署中未显示图像

wz8daaqr  于 2023-04-30  发布在  其他
关注(0)|答案(2)|浏览(264)

当我使用“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>

Expected Output (in Local Server)
Vercel Deployed Output

anauzrmj

anauzrmj1#

这是由于文件夹结构造成的。我以前遇到过同样的问题。
您可以添加类似于**/public/static/images**的结构,并将您的图像放入其中,如下所示:

<img src={"/static/images/test.png"} alt="" />
9jyewag0

9jyewag02#

所以我就自己解决了。首先,您应该检查您的图像是否加载到.next/static/media/文件夹中。每次保存时,该文件夹的作用类似于部署前项目的dist/文件夹。
我建议您使用与示例中相同的路径模块化地导入图像。我给你举个例子:

import img06 from './06.png'      // importing path modularly

<div className="content">
      <div className="cards">
        {jsonData.map((info) => {
          return (
            <div className="card" key={info.id}>
              <div className="card-head">
                <img src={img06} />              // src as var
                <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>

如果您看到文件名、散列和末尾的文件类型扩展名,您将知道它是否将在部署时加载。
例如,如果我加载06。png,它应该会在你的.next/static/media/文件夹中弹出这样的内容:
06.f9e5c945.png
尝试部署,看看是否有效!如果是的话,如果你选择我的答案作为正确答案,我会非常感激,因为这将是我第一个接受的答案或StackOverflow!:)

相关问题