next.js image is missing src property

Question

I get this error:

error : image is missing src property.

I'm not sure what's wrong since it worked with code I have. After I closed vscode and opened it again shortly the error happened. Here's my codes:

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

next-config.js

module.exports = {
  reactStrictMode: true,

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

    return config;
  }
}

Answer 1

I deleted the webpack config from next.config.js settings that are not necessary.You can display your logo svg in two ways, directly from Image src or import from Logo, both work fine, like this:

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 I removed webpack(config)

module.exports = {
  reactStrictMode: true,
};

---

Project Folder & File structure:

---

Output:

Tested with "next": "12.0.7","react": "17.0.2", "tailwindcss": "^3.0.5"