Не отображается изображение в React JS, а иконка отображается

Рейтинг: 0Ответов: 0Опубликовано: 02.04.2023

Не отображается изображение в 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

Ответы

Ответов пока нет.