When I click on the product I get the rating,productname,price etc, but I dont get the full image. I get the 404 error but it shows it is in the right folder. On the main page I get the product picture.
GET http://localhost:3000/product/images/hardtail/caliber8.jpg 404 (Not Found)
lat’s go backwards: 1. make sure in productHooks you have this written correctly:
export const useGetProductDetailsBySlugQuery = (slug: string) =>
useQuery({
queryKey: [“products”, slug],
queryFn: async () =>
(await apiClient.get<Product>(`api/products/${slug}`)).data,
});
2. then in index.ts of backend that this is written correctly:
app.get(“/api/products/:slug”, (req: Request, res: Response) => {
res.json(sampleProducts.find((x) => x.slug === req.params.slug));
});
3. and most likely the problem, in backend data.ts check the paths of the images are correct like so:
image: “../images/p1.jpg” provided you have all images in frontend/public/images.