Trying my hand at learning React JS through a tutorial, I created a reusable component to display information. However, I encountered an issue where my SVG image is not displaying properly. Take a look:
https://i.sstatic.net/dhK4D.png
Notice how the image isn't showing and instead, the alt text is displayed.
To accomplish this, I divided the process into three files:
1)index.js - responsible for rendering the ReactJS code
const InfoSection = ({
lightBg,
imgStart,
topLine,
lightText,
headLine,
description,
buttonLabel,
img,
alt,
id,
darkText,
}) => {
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'>{buttonLabel}</Button>
</BtnWrap>
</TextWrapper>
</Column1>
<Column2>
<ImgWrap>
<Img src={img} alt={alt} />
</ImgWrap>
</Column2>
</InfoRow>
</InfoWrapper>
</InfoContainer>
)
}
InfoElements- contains all the styled components and CSS. Regarding the issue,ImgWrapandImgare involved.
export const ImgWrap = styled.div`
max-width: 555px;
height: 100%;
`;
export const Img = styled.img`
width: 100%;
margin-top: 0;
margin-right: 0;
margin-left: 10px;
padding-right: 0;
`;
data.jsfile- where data is passed
export const homeObjOne = {
id: 'about',
lightBg: false,
lightText: true,
lightTextDesc: true,
topLine: 'About',
headLine: 'headline',
description:
'description',
buttonLabel: 'Get Started',
imgStart: false,
img: require('../../images/about.svg'),
alt: 'alt line, if image does not show up',
dark: false,
primary: true,
darkText: false
};
I've tried various methods of writing the img in the data file,
img: require('../../images/about.svg')The path seems correct as there's no error thrown by React. Following the tutorial guidelines, I used require. What am I missing? How can I ensure the image shows up?