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

Question

我正在使用动态图像。在 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 尽管格式错误，我也会得到同样的错误。）

有人可以告诉我我错过了什么或做错了什么吗？多谢！！

Answer 1

我从评论中得到了帮助。问题出在图片的 url 上。

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

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

我的 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以查看本地的生产构建。