Así que estoy tratando de crear un selector de equipo para Overwatch y tengo un sitio web con tarjetas dispuestas en una fila horizontal. Son tarjetas en blanco, grises. Se colocan utilizando el siguiente código JSX:

 import React from 'react'; import './heroes.css'; const heroes = () => { return ( <div> <div className='hero-container'> { displayHeroes() } </div> </div> ) }; const displayHeroes = () => { const row = []; const heroes = ['Dva','Orisa','Rein','Hog','Sigma', 'Winston','Ball','Zar','Ashe,','Bastion', 'Cassidy','Doom','Echo','Genji', 'Hanzo','Junkrat','Mei','Pharah', 'Reaper','Soldier','Sombra','Sym', 'Torb','Tracer','Widow','Ana', 'Bap','Brig','Lucio','Mercy', 'Moira','Zen']; for (let i =0; i<32; i++){ row.push(<div className='hero scale-up-ver-bottom '> <img src="" alt={heroes[i]} /> </div>) } return row; };

heroes() solo da un div para colocar todas las cartas, y displayHeroes() recorre una serie de héroes y asigna texto alternativo a cada carta, y devuelve una serie de divs para representar. Cuando pongo una ruta de archivo en src="" no pasa nada.

 .hero { background-color: gray; width: 30px; height: 50px; margin-top: 10px; margin-right: 2.5px; margin-left: 2.5px; padding: 20px; border-radius: 10px; flex-shrink: 0; box-shadow: 0px 5px 10px gray; outline-style: solid; outline-width: 2.5px; outline-color: black; } .hero img { width: 100%; height: 100%; }

¿Cómo puedo poner una imagen dentro de una forma definida por las propiedades css? No puedo resolverlo.