next.js 图片缺少 src 属性

Question

我收到这个错误：

error : image is missing src property.

我不确定哪里出了问题，因为它适用于我的代码。在我关闭 vscode 并再次打开它后不久，错误发生了。这是我的代码：

navbar.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>
  );
}

下一个-config.js

module.exports = {
  reactStrictMode: true,

  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });

    return config;
  }
}

Answer 1

我从 next.config.js 设置中删除了 webpack config 不是 necessary.You 可以通过两种方式显示您的徽标 svg ，直接来自 Image src 或 import 来自 Logo，两者都工作正常，如下所示：

example.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”

next.js 图片缺少 src 属性

next.js image is missing src property

svg

reactjs

next.js

tailwind-css

next-images