React passing img src from Data.js to index.js but is showing as [object model] in page source

Question

I'm trying to pass the path name from a Data file to my index page for a page section, all the other things being passed like text and true or false variables work fine, but passing the "require(../../images/svg-1.sv)" shows up as [object model] in the page source instead of the require and image source. Page Source Error

Following this tutorial video: https://youtu.be/Nl54MJDR2p8

Data.js:

export const homeObjOne = {
       id: "about",
       lightBg: false,
       lightText: true,
       lightTextDesc: true,
       topLine: "Premium Bank",
       headline: "Unlimited Transactions with zero fees",
       description:
          "Get access to our exclusive app that allows you to send unlimited transactions 
          without getting charged any fees.",
       buttonLabel: "Get started",
       imgStart: false,
       img: require('../../images/svg-1.svg'),
       alt: "Car",
       dark: true,
       primary: true,
       darkText: false,
    };

index.js for InfoSection:

import React from "react";
import { Button } from "../ButtonElements";
import {
  InfoContainer,
  InfoWrapper,
  InfoRow,
  Column1,
  Column2,
  TextWrapper,
  TopLine,
  Heading,
  Subtitle,
  BtnWrap,
  ImgWrap,
  Img,
} from "./InfoElements";

const InfoSection = ({
  lightBg,
  id,
  imgStart,
  topLine,
  lightText,
  headline,
  darkText,
  description,
  buttonLabel,
  img,
  alt,
  primary,
  dark,
  dark2,
}) => {
  return (
    <>
      <InfoContainer lightBg={lightBg} id={id}>
        <InfoWrapper>
          <InfoRow imgStart={imgStart}>
            <Column1>
              <TextWrapper>
                <TopLine>{topLine}</TopLine>
                <Heading lightText={lightText}>{headline}</Heading>
                <Subtitle darkText={darkText}>{description}</Subtitle>
                <BtnWrap>
                  <Button
                    to="home"
                    smooth={true}
                    duration={500}
                    spy={true}
                    exact="true"
                    offset={-80}
                    primary={primary ? 1 : 0}
                    dark={dark ? 1 : 0}
                    dark2={dark2 ? 1 : 0}
                  >
                    {buttonLabel}
                  </Button>
                </BtnWrap>
              </TextWrapper>
            </Column1>
            <Column2>
              <ImgWrap>
                <Img src={img} alt={alt} />
              </ImgWrap>
            </Column2>
          </InfoRow>
        </InfoWrapper>
      </InfoContainer>
    </>
  );
};

export default InfoSection;

NOTE: I am also using styled-components for styling.

Answer 1

You can try to use import instead of require

   import Svg1 from '../../images/svg-1.svg';

   export const homeObjOne = {
   id: "about",
   lightBg: false,
   lightText: true,
   lightTextDesc: true,
   topLine: "Premium Bank",
   headline: "Unlimited Transactions with zero fees",
   description:
      "Get access to our exclusive app that allows you to send unlimited transactions 
      without getting charged any fees.",
   buttonLabel: "Get started",
   imgStart: false,
   img: Svg1,
   alt: "Car",
   dark: true,
   primary: true,
   darkText: false,
};