En el componente React tengo una matriz de objetos:

 const books = [ { id: 1, name: "The Chrysalids", author: "John Wyndham", image: "chrysalids", }, { id: 2, name: "In Cold Blood", author: "Truman Capote", image: "in-cold-blood", }, { id: 3, name: "Jane Eyre", author: "Charlotte Brontë", image: "jane-eyre", }, ];

Y lo he mapeado así:

 <div className="row"> {books.map((book) => ( <BookComponent key={book.id} name={book.name} author={book.author} alt={book.name} src={require("./assets/images/" + book.image + ".png")} /> ))} </div>

Todo funciona bien, pero la imagen no funciona en html, y la etiqueta src de img se muestra así:

 <img src="[object Module]" alt="The Chrysalids">

Además, la ruta al directorio de imágenes es './assets/images/'.

EDITAR: Gracias a todos, la propiedad .default resolvió el problema.