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;
わかりづらいかもしれませんが、何卒よろしくお願い致します。
svg-1.svg をどこに置いて、react をどうやって動かしてるかによるでしょうね。
あなたの回答
tips
プレビュー