Next.js + Vercel：动态图像在本地显示，但不在生产环境中答案

【问题标题】：Next.js + Vercel: Dynamic images displaying locally, but not in productionNext.js + Vercel：动态图像在本地显示，但不在生产环境中
【发布时间】：2021-08-06 23:10:20
【问题描述】：

我正在使用动态图像。在 localhost 上一切正常，但只要我在 vercel 上部署 next.js-app，就只显示后备图像（默认图像出现 404 错误）。

顺便说一句，当我对图像进行硬编码而不是使用动态路径时，一切正常。所以我认为问题出在动态路径中（？）。

以下是相关代码：

function isImageValid(src) {
  let promise = new Promise((resolve) => {
    let img = document.createElement("img");
    img.onerror = () => resolve(false);
    img.onload = () => resolve(true);
    img.src = src;
  });

  return promise;
}

function Img({ src, fallbackSrc, ...rest }) {
  const imgEl = React.useRef(null);
  React.useEffect(() => {
    isImageValid(src).then((isValid) => {
      if (!isValid) {
        imgEl.current.src = fallbackSrc;
      }
    });
  }, [src]);

  return <img {...rest} ref={imgEl} src={src} />;
} 
 
const ItemImage = ({ company, name }) => {
  return (
    <Img
      alt="some image"
      src={`/assets/items/${company
        .toLowerCase()}-${
        name
          .toLowerCase()}.png`}
      fallbackSrc="/assets/fallback-img.jpg"
    />
  );
};

一般来说，我使用的是 next-images。我没有使用下一个/图像，因为图像的大小各不相同，我现在还没有找到一个好的解决方案。（但即使我尝试使用 next/images 尽管格式错误，我也会遇到同样的错误。）

谁能告诉我我错过了什么或做错了什么？非常感谢！！

【问题讨论】：

请查看stackoverflow.com/help/minimal-reproducible-example
如果您在本地运行 prod 构建，您会遇到同样的问题吗？图片的 URL 在生产环境中是否正确？
@juliomalves：非常感谢！您帮我找到了问题：图片的 URL 不正确（全部小写）。这不是开发中的问题，而是生产中的问题..

标签： image next.js vercel

【解决方案1】：

我得到了 cmets 的帮助。问题出在图片的网址上。

图像的路径区分大小写。确保它匹配所有内容。

为了帮助调试，请在本地运行生产构建。

我的 package.json 是

  "scripts": {
    "dev": "next lint & NODE_OPTIONS='--inspect' next dev",
    "build": "next build",
    "start": "next start",
    "prod": "next build && next start"
  },

运行 npm run prod 在本地查看生产版本。

【讨论】：