NextJs映像进入无限循环，错误为：“url”参数有效，但上游响应无效

8ehkhllq 于 2023-03-12 发布在其他

关注(0)|答案(1)|浏览(115)

我正在使用next/image组件与下一个js ^12.2.3-canary.17版本为我的项目现在的问题，我在这里面临的这个图像组件是一些图像从源目录本身丢失。由于这个原因，它返回无限的错误日志，如下图：

我想用另一个表示图像不存在的URL替换当前的图像URL。为了防止无限循环，我找到了一个解决方案，将onerror属性设置为null，并用一个后备图像替换src属性，如下所示：

但没有用。
PS：我已经在我的next.config.js错误中添加了有效的域，与此无关。
有谁能帮忙吗？我很感激任何建议。

来源：https://stackoverflow.com/questions/75337048/nextjs-image-went-in-infinite-loop-with-error-url-parameter-is-valid-but-upst

1条答案

按热度按时间

icnyk63a1#

我是这样处理的：

const [imageError, setImageError] = useState(new Map<string, boolean>());

function handleImageError(itemId:string) {
    setImageError(imageError.set(itemId, true));
  }

return(
                        <Image 
                        height={301}
                        width={226}
                        src={item && !imageError.get(item.id) && item.image `${process.env.API_URL}/${item.image}`}
                        onError={() => {
                          handleImageError(item.id);
                        }} />
)

不知道这是不是好办法，心想

赞(0）回复(0）举报 2023-03-12

我来回答

NextJs映像进入无限循环，错误为：“url”参数有效，但上游响应无效

1条答案

相关问题

热门标签

最新问答