عدم ظهور الصور في React

لاحظ في ملف store\src\Components\Hero\HeroSlider.jsx لم تقم بإستخدام الصور بالشكل الصحيح حيث وضع المسار كنص ولكن يجب إستيراد الصور هكذا :

import React,{useRef , useState} from 'react';
import {Swiper , SwiperSlide} from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
import {Autoplay ,Pagination} from 'swiper/modules';
import {Link} from 'react-router-dom'
import banner1 from '../../img/banner_Hero1.jpg';
import banner2 from '../../img/banner_Hero2.jpg';
import banner3 from '../../img/banner_Hero3.jpg';
const HeroSlider = () => {
  return (
    <section>
     <>

     <div className="hero">
        <div className="container">
            <Swiper loop={true} autoplay={{delay:2500,disableOnInteraction: false,}} pagination={true} modules={[Pagination, Autoplay]} className='mySwiper'>
            <SwiperSlide>
                <div className="content">
                    <h4>Introducing the new</h4>
                    <h3>Microsoft Xbox <br />  360 Controller</h3>
                    <p>Windows Xp/10/7/8 Ps3, Tv Box</p>
                    <Link to="/" className="btn">Shop Now</Link>
                </div>
                <img src={banner1} alt="slider hero1" />
            </SwiperSlide>
             <SwiperSlide>
                <div className="content">
                    <h4>Introducing the new</h4>
                    <h3>Microsoft Xbox <br />  360 Controller</h3>
                    <p>Windows Xp/10/7/8 Ps3, Tv Box</p>
                    <Link to="/" className="btn">Shop Now</Link>
                </div>
                <img src={banner2} alt="slider hero1" />
            </SwiperSlide>
             <SwiperSlide>
                <div className="content">
                    <h4>Introducing the new</h4>
                    <h3>Microsoft Xbox <br />  360 Controller</h3>
                    <p>Windows Xp/10/7/8 Ps3, Tv Box</p>
                    <Link to="/" className="btn">Shop Now</Link>
                </div>
                <img src={banner3} alt="slider hero1" />
            </SwiperSlide>
            </Swiper>
        </div>
     </div>

     </>
    </section>
  )
}

export default HeroSlider