reactで画像(img)が読み込みません。

reactでwebサイトを作成中、画像が読み込みません。自分なりに調べておりますが、原因がわかりません。

どのような原因が考えられますでしょうか。教えて頂けると幸いです。

（スクリーンショット）

コード

(HeroSection.js)


import React from 'react'
import { Button } from './pages/Button';
import { Link } from 'react-router-dom';
import './HeroSection.css';

function HeroSection({
  lightBg, topline, lightText, lightTextDesc, headline, description, 
  buttonLabel, img, alt, imgStart
}) {
  return ( 
    <>
    <div className={lightBg ? 'home__hero-section' : 'home__hero-section darkBg'}>
      <div className="container">
        <div className="row home__hero-row" style={{display: 'flex', flexDirection: imgStart === 'start' ? 'row-reverse' : 'row' }}>
          <div className="col">
            <div className="home__hero-text-wrapper">
              <div className="top-line">{topline}</div>
              <h1 className={lightText ? 'heading' : 'heading dark'}>{headline}</h1>
              <p className={lightTextDesc ? 'home__hero_subtitle' : 'home__hero-subtitle dark'}>{description}</p>

              <Link to="/sign-up">
                <Button buttonSize='btn--wide' buttonColor="blue">{buttonLabel}</Button>
              </Link>
      
            </div>
          </div>
          <div className="col">
            <div className="home__hero-img-wrapper">
              <img src={img} alt={alt} className="home__hero-img"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    </>);
}

export default HeroSection;

(Home.js)


import React from 'react'
import HeroSection from '../../HeroSection'
import {HomeObjOne} from '../HomePage/Data'

function Home() {
  return (
    <>
    <HeroSection {...HomeObjOne} /> 
    </>
  )
}

export default Home

Data.jp

export const HomeObjOne = {
  lightBg: false,
  lightText: true,
  lightTextDesc: true,
  topLine: 'Exclusive Access',
  headline: 'Unlimited Transactions with zero fees',
  description: 
   'Get access to our exclusive diamond card that allows you to send unlimited transactions without getting charged any fees',
   buttonLabel: 'Get Started',
   imgStart: '',
   img: 'img/svg-1.svg',
   alt: 'Credit Card'
}

(App.js)


import React from 'react';
import './App.css';
import Navbar from './components/pages/Navbar';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; 
import Home from './components/pages/HomePage/Home';

function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path='/' exact component={Home} />
      </Switch>
    </Router>
  );
}

export default App;

わかりづらいかもしれませんが、何卒よろしくお願い致します。