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?
CodePudding user response:
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"
/>