javascript - 让 NextJS 图像组件和 @svgr/webpack 一起玩得很好

Question

我有一个带有 @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 === 'undefined')
> 278 | if (src && src.startsWith('data:')) {
      |           ^
  279 |   // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
  280 |   unoptimized = true
  281 |   isLazy = false

我想也许我应该将 Logo 组件作为一个实际的组件包含在内，如下所示: <Image src={<Logo />} width={174} height={84} />然而，这也没有奏效。
知道出了什么问题以及如何解决吗？

Answer 1

使用您当前的 webpack 配置导入 @/svg/logo.svg只会将 SVG 文件作为 React 组件导入。
至import it as a data URL ，您将需要在 next.config.js 中的以下 webpack 配置.

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

        return config;
    }
};

然后，您将能够以两种方式使用它:作为 URL 或作为组件。

import Image from 'next/image'
import svgUrl, { ReactComponent as Logo } from '@/svg/logo.svg'

<Image src={svgUrl} width={174} height={84} />
// or as a component
<Logo />