1

我的nextjs应用程序中有一个反应组件，它使用next/image：

<Image
    src={`http://backend${image.url}`}
    alt={image.alt}
    width={image.width}
    height={image.height}
    />

在 linesrc={'http://backend${image.url}'}中，backend是 kubernetes 服务的名称，通过它可以将图像用于nextjs微服务。

当我部署它时，微服务在渲染组件nextjs时崩溃（没有错误） 。<Image />（没有<Image />渲染的页面没有任何问题。）

我不知道原因，但pod重新启动nexjs容器。我检查kubectl top pod了是否是因为资源限制，但没有发现 CPU/RAM 限制。

映像位于预配置的 Kubernetes 卷中。有两个nginx微服务为图像提供服务：

  1. 其中之一将图像提供给世界，例如网络浏览器可以请求这样的图像：（/media/images/image-1.jpg效果很好。）

  2. 另一个将图像提供给nextjs微服务。它包括一个名为backend. 例如在nextjs容器中可以像这样请求图像：

    <Image src={'http://backend${image.url}' ... />

当我关闭图像优化 ( unoptimized={true}) 并更改src从 Web 浏览器（而不是nextjs微服务）获取图像时，一切正常：

<Image
    unoptimized={true}
    src={`${image.url}`}
    alt={image.alt}
    width={image.width}
    height={image.height}
    />

我想要图像优化功能。如何处理这个问题。提前致谢！

更新

有没有办法在微服务中做到"http://backend/media/image-1.jpg"平等？那么这将得到解决？"/media/image-1.jpg"nextjs"/media/image-1.jpg""http://backend/media/image-1.jpg"

4

1 回答 1

0

这是下一个 js 中的一个错误。下个稳定版本就可以了。

有关更多信息，请参阅：https ://github.com/vercel/next.js/issues/22644

于 2021-03-05T18:53:57.803 回答