Question

我使用的是动态图片。在本地主机上一切正常，但是一旦我在 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，我也会遇到同样的错误。）

有人能告诉我我遗漏了什么或做错了什么吗？非常感谢！！

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

0 个答案: