"dependencies": {
"daisyui": "^2.46.0",
"next": "13.0.5",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@svgr/webpack": "^6.5.1",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.19",
"tailwindcss": "^3.2.4",
"tailwindcss-animate": "^1.0.5"
昨天晚上的SVG工作,现在今天无法加载。在这段时间内没有任何变化。SVG仍然呈现在“SVG查看器”网站。假设这是一个SVGR的问题。
Broken Photo picture
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
}
module.exports = nextConfig
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ['@svgr/webpack'],
})
return config
},
};
示例代码
import JavaScript from "../public/javascript.svg";
<div className="tooltip" data-tip="JavaScript">
<Image src={JavaScript} alt="JavaScript" height={50} width={50} className=""></Image>
</div>
SVG图形发生器
<?xml version="1.0" ?>
<svg fill="stroke" viewBox="100 100 375 375" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet">
<title />
<path
d="M32,32V480H480V32ZM272,380c0,43.61-25.76,64.87-63.05,64.87-33.68,0-53.23-17.44-63.15-38.49h0l34.28-20.75c6.61,11.73,11.63,21.65,26.06,21.65,12,0,21.86-5.41,21.86-26.46V240h44Zm99.35,63.87c-39.09,0-64.35-17.64-76.68-42h0L329,382c9,14.74,20.75,24.56,41.5,24.56,17.44,0,27.57-7.72,27.57-19.75,0-14.43-10.43-19.54-29.68-28l-10.52-4.52c-30.38-12.92-50.52-29.16-50.52-63.45,0-31.57,24.05-54.63,61.64-54.63,26.77,0,46,8.32,59.85,32.68L396,290c-7.22-12.93-15-18-27.06-18-12.33,0-20.15,7.82-20.15,18,0,12.63,7.82,17.74,25.86,25.56l10.52,4.51c35.79,15.34,55.94,31,55.94,66.16C441.12,424.13,411.35,443.87,371.35,443.87Z" />
</svg>
控制台错误代码
Image is missing required "src" property: <img alt="JavaScript" src width="50" height="50" decoding="async" data-nimg="1" class loading="lazy" style="color:transparent">
window.console.error @ next-dev.js?3515:20
尝试SVGR Github中所有高赞帖子
https://github.com/vercel/next.js/issues/26130
我还尝试将@svgr/webpack npm包移到dependencies而不是devDependencies,以查看它是否是运行时问题,但没有效果。
1条答案
按热度按时间wfsdck301#
是的,这是一个svgr问题。当你把svgr添加到你的webpack配置中时,这是覆盖nextjs * 静态导入 * 行为。通常在nextjs中,导入结果类似于
{ src: string, width?: number, height?: number }
,但是当包含svgr时,导入结果变成了一个react组件。