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.
CodePudding user response:
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,
};