我收到此錯誤：
錯誤：影像缺少 src 屬性。
我不確定出了什么問題，因為它與我擁有的代碼一起使用。在我關閉 vscode 并再次打開它之后，錯誤發生了。這是我的代碼：
導航欄.js
import React from "react";
import Link from "next/link";
import Image from "next/image";
import Logo from "../components/svg_logo.svg";
export default function Navbar() {
return (
<nav className="bg-transparent">
<div className="max-w-6xl mx-auto px-4 pt-1.5">
<div className="flex justify-between">
<div className="flex space-x-4">
<div>
<Link href="#">
<a className="flex items-center py-5 px-2 select-none text-gray-700 text-2xl hover:text-gray-900">
<Image src={Logo} alt="logo" height={30} width={30} />
<span className="font-bold text-white">Logo</span>
</a>
</Link>
</div>
</div>
</div>
</div>
</nav>
);
}
下一個配置.js
module.exports = {
reactStrictMode: true,
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"]
});
return config;
}
}
uj5u.com熱心網友回復：
我洗掉了不需要的webpack configfromnext.config.js設定。您可以通過兩種方式顯示您的徽標 svg，直接 fromImage src或importfrom Logo，兩者都可以正常作業，如下所示：
例子.js
import Link from "next/link";
import Image from "next/image";
import Logo from "../public/images/nextjs.svg";
function ExamplePage() {
return (
<nav className="bg-green-600">
<div className="max-w-6xl mx-auto px-4 pt-1.5">
<div className="flex justify-between">
<div className="flex space-x-4">
<div>
<Link href="#">
<a className="flex items-center py-5 px-2 select-none text-gray-700 text-2xl hover:text-gray-900">
<Image
// src="/images/nextjs.svg"
src={Logo}
alt="logo"
height={60}
width={60}
/>
<span className="font-bold text-white">Logo</span>
</a>
</Link>
</div>
</div>
</div>
</div>
</nav>
);
}
export default ExamplePage;
next.config.js我洗掉了webpack(config)
module.exports = {
reactStrictMode: true,
};
專案檔案夾和檔案結構：
輸出：
用“next”測驗：“12.0.7”，“react”：“17.0.2”，“tailwindcss”：“^3.0.5”
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/405441.html
標籤：
上一篇：React-使用svg<defs>和dangerouslySetInnerHTML
下一篇：根據情節選擇復制檔案