Firebase 存储图像未在 nextjs 应用程序中显示

Question

我正在使用 Vercel 的 Next.js 模板，并尝试将底部的徽标图像替换为存储在 Firebase 存储中的图像。 我已经配置了 next.config.js 并且它没有抛出错误但是没有显示图像。 它仅显示带有替代文本的图像缺少占位符。 这是我的 next.config.js

/**

* @type {import('next').NextConfig}

*/
const nextConfig = {

  images: {
  
  domains: ['firebasestorage.googleapis.com'],
  
  },
  
};
  
  
module.exports = nextConfig;

我也可以在我的浏览器中访问图像。

编辑 14/08/21**

当我用标准的 html 标签替换 nextjs 图像标签时，图像确实加载了，所以它似乎是 next 的一些问题。

Answer 1

是的，我遇到了同样的问题，并且通过将图像标签从 NextJs 标签更改为普通的 html 标签来解决问题。 这会起作用，是的，您会收到 eslint 警告，但您没有其他选项希望这可能会有所帮助

Answer 2

我使用 nextjs 中的“未优化”属性解决了它

                <Image
                    src={item?.categoryImageUrl ?? placeholderImage}
                    alt={item?.categoryName || t("text-card-thumbnail")}
                    width={imageSize}
                    height={imageSize}
                    // quality={100}
                    unoptimized
                    className={`object-cover bg-gray-300 ${
                        variant === "rounded"
                            ? "rounded-md"
                            : "rounded-full"
                    }`}
                />

在nextjs unoptimized阅读更多相关信息