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)
oops sorry, I’m doing the TS amazona one, for the regular react with js amazona check your image file paths in data.js are they written like so? ” image: ‘/images/p1.jpeg’,”. Seems your fetch call can’t locate the image so check the paths and that the images are in the correct folder.
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.