我有一个网站与博客，我什么能够发送通知时，一个新的博客文章张贴。因此，我想让网站成为PWA。我找到了next-pwa库并成功实现了它。除了当我构建/部署到Vercel时，无法加载映像。所有图像都出现以下错误：

www.example.com/:1 GET https://www.exampel.com/_next/image?url=https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Feample.appspot.com%2Fo%2FimagePath.jpg%3Falt%3Dmedia%26token%4e1a-8e60-8c1058fa0993&w=256&q=75 400

字符串
我还得到了GoogleagManager和Vercel Insights的错误：

workbox-4f8070a3.js:1 Uncaught (in promise) no-response: no-response :: [{"url":"https://www.googletagmanager.com/gtag/js?l=dataLayer&id=G-WWGHCNEQG4"}]
    at v.D (https://www.cl-sektionen.se/workbox-4f8070a3.js:1:22182)
    at async v (https://www.cl-sektionen.se/workbox-4f8070a3.js:1:7597)

型
根据一些谷歌搜索，我认为PWA在某种程度上搞砸了图像优化。所以我问是否有任何方法来解决这个问题，理想情况下保持图像优化？
下面是下一个. config.js：

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

const withPWA = require("next-pwa")({
  dest: "public",
});

const nextConfig = {
  productionBrowserSourceMaps: true,
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "firebasestorage.googleapis.com",
        port: "",
      },
    ],
  },
  plugins: [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
        features: {
          "custom-properties": false,
        },
      },
    ],
    [
      "@fullhuman/postcss-purgecss",
      {
        content: ["./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"],
      },
    ],
  ],
};

module.exports = withPWA({
  nextConfig,
});

型
下面是manifest.json

{
  "name": "Long name",
  "short_name": "Name",
  "theme_color": "#d23022",
  "background_color": "#fafafa",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "media/icons/maskable_icon_192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
        "src": "media/icons/maskable_icon_384x384.png",
        "sizes": "384x384",
        "type": "image/png"
      },
    {
      "src": "media/icons/maskable_icon_512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "splash_pages": null
}

型