I am working on an app which has a product page and an image won't render on the website despite the rest of the information on inside the return statement rendered. I have no errors on web dev tools, the app compiled successfully with the following code.
ProductScreen.js
import React from 'react';
import data from '../data';
import Rating from '../components/Rating';
import { Link, useParams } from 'react-router-dom';
function ProductScreen() {
const { id } = useParams();
// const params = useParams();
// const { id: productId } = params;
const product = data.products.find((x) => x._id === (id));
if (!product) {
return <div> Product Not Found </div>;
}
return (
<div>
<Link to="/">Back To Result</Link>
<div className="row top">
<div className="col-2">
<img className="large" src={product.image} alt={product.name} ></img>
</div>
The Main page did render all the images though. Not sure how to find the issue especially when there is no error showing.
This is solved thru the suggested solution of @Tomer Almog! Also, thank you @Luigi Remor & @coglialoro for taking the time.
Are you sure that the src is right, look at your project directory and see if it is there "../data". If it exists, look in each object from the list and look if the image is forwarding to the right folder.
