Question

When I use the Live Server to run my application the Images look fine in my local server, but after deploying the same react/next application to vercel, the images aren t getting rendered properly which are present in the public folder.

<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>

https://i.stack.imgur.com/sQInf.png”rel=“nofollow noreferer”> 预期产出(当地服务器)

https://i.stack.imgur.com/2Qqc5.png”rel=“nofollow noreferer”>Vercel Deployed Output

Answer 1

This is happening due to the folder structure. I have faced the same issue before.

您可以增加网站/public/static/images等结构,并将图像列入如下:

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

Answer 2

因此,我刚刚解决了这一问题。首先,请检查您的图像是否装在<条码>上。每次节省时间,这种行动就象在部署之前的项目的<编码>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>

如果你看到你的档案名称、一个散列,然后档案的类型最终延长,你将知道这是否将装上部署。

As an example, if I loaded 06.png, it should pop up something like this in your .next/static/media/ folder:

06.f9e5c945.png

部署和看看它是否发挥作用! 如果是的话,我真的希望你选择我的答复,作为正确的答案,因为这将是我第一次接受的答复,或者说,“SackOverflow!”

Answer 3

http://www.ohchr.org。

如果您正在使用下一份 Java本的话,在您的<代码>next.config.js文档中加入:

module.exports = {
    images: {
      domains: ["images.pexels.com","miro.medium.com", "www.cnet.com"],
    },
  }

<>Explanation>

为了从一个网站中检索图像,以便更快地储存这些图像,下台Java出版社需要你提供根基目录,以便你不必在同一网站上对每一个图像进行编辑,因此,你必须宣布你从该网站检索图像。

Answer 4

问题在于旁观者在建筑时间有可变的图像,因此,你必须将其进口到顶端,并将其用于北极特征。

Answer 5

我这样做,我的形象显示: 首先,我建议的是,图像应当放在公共文件夹中,然后在档案展期之前,应先进行反弹,例如,文件名称。延期

Answer 6

In my case it was a problem with files.

I initially exported .png screenshots as .svg and imported them into my project. I later realized that safari can t render those in HQ. So I changed file extension inside project folder .svg -> .png which wasn t a proper way to do it.

我通过在<代码>png<>/code>格式上出口Figma的屏幕,将其重新输入项目,并展示图像。

友情链接