[FIXED] How to use next/image show image under project folder with Next.js?

Issue

I want to create a component use next/image show a image like

import React from "react";
import Image from "next/image";

type ThumbnailType = {
  image: string;
  alt: string;
  width: string;
  height: string;
};

export const Thumbnail: React.FC<ThumbnailType> = ({
  image,
  alt,
  width,
  height,
}) => {
  return <Image src={image} alt={alt} width={width} height={height} />;
};

When use this component in one page:

import type { NextPage } from "next";
import {
  Thumbnail,
} from "~/components";

const Home: NextPage = () => {
  return (
    <div>
      <Thumbnail
        image="/src/public/product.png"
        alt="nice"
        width="100"
        height="100"
      />
    </div>
  );
};

export default Home;

The product.png image is under the src/public folder. But from browser got this src:

f_auto,c_limit,w_384,q_auto/src/public/product.png

Why?

Solution

You should put public folder in the root directory, not in src folder

your_nextjs_project/public

<Thumbnail
    image="/product.png"
    alt="nice"
    width="100"
    height="100"
/>

Answered By - iamhuynq

Answer Checked By - Marie Seifert (PHPFixing Admin)