Next/image 在控制台中引发错误“上述错误发生在” 中。组件：”，但上面没有错误。仅限野生动物园

Question

我尝试使用 typescript 在 Next.js 框架的 next/image 组件中显示来自外部源的图像。

import Image from "next/image";
import React from "react";

export const DetailCard: React.FC = () => { 
        const srcPath = 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png'; 
        return (
        <div>
            <Image src={srcPath} height={500} width={500} />
        </div>   
    ); 
};

一切都可以在 Windows、Linux 和 MacOS 上的 Chrome 和 Firefox 上运行。但是，如果网站在 iOS 上的 Safari 和 Chrome（未测试 Firefox）或 MacOS 上的 Safari 上运行，则图像组件在本地运行 yarn next dev -p 4000 时会引发以下错误：

The above error occurred in the <Image> component:

Image
div
DetailCard
NavLayout
ApolloProvider
MyApp
PureComponent
ReactDevOverlay
_classCallCheck
AppContainer
Root

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

问题是当顶部没有出现错误时，这个错误很难调试。 Next.js 中的标准致命 ErrorBoundary 被渲染，但没有指定错误，它变成了非交互式黑色页面。

我已经定义了图像域 v next.config.js：

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  webpack(config, options) {
    config.module.rules.push({
      test: /\.graphql$/,
      exclude: /node_modules/,
      use: [options.defaultLoaders.babel, { loader: 'graphql-let/loader' }],
    })

    config.module.rules.push({
      test: /\.graphqls$/,
      exclude: /node_modules/,
      use: ['graphql-let/schema/loader'],
    })

    config.module.rules.push({
      test: /\.ya?ml$/,
      type: 'json',
      use: 'yaml-loader',
    })
    return config
  },
  images: {
    domains: [
      'upload.wikimedia.org'
  ]
}

软件版本：

"next": "^12.1.0" ("12.0.1" also tested)
"react": "17.0.2"
"typescript": "^4.5.4"
iOS: 12.5.5
iPad Safari: 12
MacOS: Sierra 10.12.6
MacBook Safari: 12.1.2