Estoy creando una aplicación web con reaccionar. Actualmente estoy tratando de crear tarjetas que contengan texto de encabezado y una imagen.

Mi problema actual es que cuando importo la imagen y trato de usarla así:

 import iwatch from './images/iwatch.jpg'; ... <img src = {iwatch} />

la imagen parece aparecer pero se muestra como 0x0. Puedo usar la imagen de fondo de css para evitar esto, pero crear clases de css para cada tarjeta no es la ruta que me gustaría tomar.

Leí todas las publicaciones con el mismo problema que el mío e intenté todas las soluciones enumeradas, pero nada parecía funcionar.

Componente del problema:

 const CategorySelectionContainer = () => { const categories = [ { name: "Cell Phone", }, { name: "Tablet", }, { name: "Smart Watch", } ]; return ( <div> <div class = 'container'> <h2 class = 'center-text'> <strong> Select a device to get started. </strong> </h2> <div class = 'justify'> {categories.map((cat) => <div key = {cat.name} class = 'card card-2 center-text card-container'> <div class = 'image'> <h4>{cat.name}</h4> <img style={{width:'auto',height:'auto'}} class = 'img' url = '/images/iwatch.jpg'/ > </div> </div> )} </div> </div> </div> ); }; export default CategorySelectionContainer

Actualmente, la imagen está en la carpeta pública, por lo que solo hago referencia a la imagen sin llaves.

Lo intenté:

1. Importación de la imagen relativa al archivo js (como se ve arriba)
2. Mover la imagen a la carpeta pública para hacer referencia a ella de esa manera

Tengo la sensación de que es algo relacionado con CSS, pero no tengo idea de qué podría estar mal. editar: puedo usar el componente en la aplicación y se muestra correctamente. Todavía no estoy seguro de por qué.