Не отображается изображение в React JS, а иконка отображается
Не отображается изображение в React JS, иконка отображается, а вот изображение не отображается. Что не так с кодом?
import "./Benefits.css";
import Links from "../Links/Links";
import { benefits } from "../../utils/benefits";
function Benefits() {
const [isActive, setIsActive] = useState();
function handleClick(id) {
setIsActive(id);
};
return (
<section className="benefits" id="benefits">
<div className="benefits__container">
<h2 className="benefits__title">Дети любят наши уроки потому что:</h2>
<div className="benefits__content">
<div className="benefits__wrap">
{benefits.map((item) => (
<div key={item.id} onClick={() => handleClick(item.id)} className={isActive === item.id ? 'benefits-card benefits-card_active' : 'benefits-card'}>
<img src={item.icon} className='benefits-card__icon' alt='Иконка' />
<div className='benefits-card__text'>
<h2 onClick={() => handleClick(item.id)} className={isActive === item.id ? 'benefits-card__name benefits-card__name_active' : 'benefits-card__name'}>{item.title}</h2>
<p className='benefits-card__description'>{item.description}</p>
</div>
</div>
))}
</div>
<div>
{benefits.map((image) => (
<img key={image.id} scr={image.id} onClick={() => handleClick(image.id)} className={isActive === image.id ? 'benefits-card__img_active' : 'benefits-card__img'} alt="Картинка" />
))}
</div>
</div>
<button type="submit" className="button benefits__button">отправить заявку</button>
<Links />
</div>
</section>
);
};
export default Benefits;```
[1]: https://i.sstatic.net/FsDIP.jpg
Источник: Stack Overflow на русском