Hey there, I'm having an issue with displaying an image stored inside the NextJS API folder. The alt attribute is showing up fine, but the actual image isn't displaying. When I console.log the image data, everything seems to be in place. Can anyone spot what I might be doing wrong?
Here's a peek at my code: // pages/api/data.tsx file
import type { NextApiRequest, NextApiResponse } from 'next'
type Data = {
id: number,
name: string,
description: string,
image: string,
price: number
}[]
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
res.status(200).json(
[
{
id: 1,
name: "pump control",
image: "/public/automatic.png",
price: 20000,
description: "automatic pressure control for water regulator"
},
{
id: 2,
name: "Automatic pump control",
image: "/public/pump.png",
price: 20000,
description: "automatic pressure control for water regulator"
}
]
)
}
items.tsx file
import axios from "axios"
import useSWR from "swr"
import Image from "next/image"
import { useRouter } from "next/router"
export type CartItemType = {
id: number
name: string
image: string
amount: string
price: number
description: string
}
const Items: React.FC = () => {
const fetcher = (apiUrl: string) => axios.get(apiUrl).then(res => res.data)
const router = useRouter()
const { data, error } = useSWR<CartItemType[]>("http://localhost:3000/api/data/", fetcher)
console.log(data)
return (
<div>
{data?.map(item => (
<div key={item.id}>
<Image loader={() => item.image} src={item.image} alt={item.name} width={100} height="70" />
</div>
))}
</div>
)
}
export default Items