Currently, I'm working on developing a team picker tool specifically for Overwatch. The layout consists of cards arranged horizontally on a website, all appearing as blank gray placeholders. These cards are positioned using the JSX code snippet shown below:
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;
};
The function heroes() provides a container for all the card elements, while displayHeroes() iterates through an array of heroes to assign alternative text to each card and generate an array of divs for rendering purposes.
However, upon specifying a file path within src="", no visual changes occur.
.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%;
}
I am struggling with embedding an image into a shape defined by CSS properties. Any guidance on how to tackle this challenge would be greatly appreciated.