下一个JS：请求的资源不是有效的图像错误

Question

⨯ 请求的资源不是 /assets/menuItems/Gan-fan.webp 收到的 text/html 的有效图像；字符集=utf-8

我在使用下一张图片时遇到此错误。我查了一下，ChatGPT 说要确保路径没问题。我尝试过，但没有成功。图片在开发时可见，但在生产时不可见。只有替代文本可见。

<Flex
              key={item.name}
              position="relative"
              width="100%"
              borderRadius="lg"
              direction="column"
              mb="4"
            >
              <Box
                position="relative"
                width="100%"
                paddingBottom="100%"
                borderRadius="lg"
                overflow="hidden"
              >
                <Image
                  src={item.image}
                  alt={item.name}
                  style={{
                    objectFit: "cover",
                    position: "absolute",
                    top: "0",
                    left: "0",
                    width: "100%",
                    height: "100%",
                  }}
                  fill
                />
                {badgeType === "PICTURE" && (
                  <Badge
                    zIndex="4"
                    position="absolute"
                    top="0"
                    right="0"
                    bg="#dfa25f"
                    color="white"
                    m="16px"
                  >
                    <Text fontSize="xs">{item.categories.join(", ")}</Text>
                  </Badge>
                )}
              </Box>

我尝试在 ChatGPT 和下一个文档中进行搜索，但没有找到太多内容。也许网页格式有错误，但可能性很小，因为网页上的其他评论是可见的。

我也尝试过

const nextConfig = { images: { unoptimized: true } };

从堆栈溢出但它不起作用 我也尝试了堆栈溢出的方法，但它不起作用

使用 /public//assets/ 代替 /assets/

Answer 1

我也遇到了同样的问题。我注意到这些图像是从名为：

的资源中读取的

_下一个/图片？url=

我从 docker 容器运行它，重新启动 docker 容器足以重新生成服务器缓存。