Estoy tratando de enviar una imagen como apoyo desde

 import React from "react"; import "./home.css"; import Product from "./Product"; function Home() { return ( <div className="home"> <div className="home-container"> <img className="home-image" src={require("./nathan-oakley-gj1dnc7yRG0-unsplash.jpg")} alt="" /> <div className="home-row"> <Product title="Sofa Couch" price={5000} image={"./phillip-goldsberry-fZuleEfeA1Q-unsplash.jpg"} rating={5} /> <Product /> </div> <div className="home-row"> <Product /> <Product /> <Product /> </div> <div className="home-row"> <Product /> <Product /> </div> </div> </div> ); } export default Home;

en la clase de la fila de casa para

 import React from "react"; import "./product.css"; function Product({ title, image, price, rating }) { return ( <div className="product"> <div className="product-info"> <p>{title}</p> <p> <small>$</small> <strong>{price}</strong> </p> <div className="product-rating"> {Array(rating) .fill() .map((_, i) => ( <p>*</p> ))} </div> </div> <img src={require(`${image}`)} alt="" /> <button>Add to Basket</button> </div> ); } export default Product;

Este archivo. Pero la imagen no se muestra. Incluso si elimino require , no aparece. Anteriormente estaba usando una imagen local y estaba trabajando con require. Pero esto no.

Cuando lo inspecciono con la consola, dice error no detectado, no puedo encontrar el 'nombre de la imagen' del módulo.