Javascript 获取NextJS图像组件&@svgr/webpack可完美配合

我有一个安装了

@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} />

我想也许我应该把Logo组件作为一个实际的组件，比如：

然而，这也不起作用

你知道哪里出了问题，怎么解决吗

---

谢谢。

使用当前的网页配置导入

@/svg/logo。svg

将svg作为一个组件导入

要执行此操作，您需要在

next.config.js

中使用以下网页包配置

module.exports={
图像：{
域名：['images.vexels.com']
},
网页包（配置）{
config.module.rules.push({
测试：/\.svg$/,，
使用：['@svgr/webpack'，'url loader']
});
返回配置；
}
};

然后，您可以按如下方式使用它：

从“下一个/图像”导入图像
从“@/svg/logo.svg”导入svgUrl

谢谢。我想知道，将其作为数据URL导入有什么不利之处吗？如果您真的想使用

next/image

，没有太多选择，您必须使用URL。在某些情况下，我可以选择将svg文件放入公用文件夹并称之为常规文件，即

src=“/img/logo.svg

。情况并非总是如此。但在这种情况下，我想知道使用数据URL有什么缺点吗？只是如果您只需将URL引用到SVG文件，那么它似乎就没有必要了。请记住，如果您通过

@svgr/webpack

加载SVG，它将成为生成的webpack包的一部分，而通过URL直接从公用文件夹引用它则不会。

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