问题描述
我有一个安装了 next.js
库的 @svgr/webpack
站点。我已将 next.config.js
配置为与 @svgr/webpack
一起使用,现在想要导入一个 svg 图像并将其与新的 next/image
组件一起使用。
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} />
然而,这也不起作用。
知道出了什么问题以及如何解决吗?
谢谢。
解决方法
使用您当前的 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;
}
};
然后您就可以按如下方式使用它:
import Image from 'next/image'
import svgUrl from '@/svg/logo.svg'
<Image src={svgUrl} width={174} height={84} />