700 viewsMern Amazona
0 Comments

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)

dan Asked question May 29, 2023

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.

You are viewing 1 out of 2 answers, click here to view all answers.