相关疑难解决方法(0)

我有一个@svgr/webpack安装了该库的 Next.js 站点。我已配置next.config.js为可以使用@svgr/webpack，现在想要导入 svg 图像并将其与新next/image组件一起使用。

以下是我设置next.config.js文件的方法：

module.exports = {
  images: {
    domains: ["images.vexels.com"],
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

这就是我想做的：

import Image from 'next/image'
import Logo from '@/svg/logo.svg'

<Image src={Logo} width={174} height={84} />

但是，当我这样做时，我收到以下错误：

Unhandled Runtime Error
TypeError: src.startsWith is not a function

Source
client\image.tsx (278:13) @ Image

  276 | let isLazy =
  277 |   !priority && (loading === 'lazy' || typeof loading …