CODEWITHSUNDEEP
reactjs
neqts
neqts

Reputation: 19

React unvisible image

I want to connect image to some section in react but i dont know why react dont see images in folder, but im sure the path is right. Have any some idea thats the problem? In my opioni codes looks right or maybe there is some gap i looked 10 times . I upload every code connected with this section I will be gratefull for help and waste time 

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

export const homeObjOne = {
  id: "about",
  lightBg: false,
  lightText: true,
  lightTextDesc: true,
  topLine: "Premium Bank",
  headline: "Unlimited Transactions with zero fees",
  description:
    "Get acces to our exclusive app that allows you to sen 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,
};

export const Img = styled.img`
  width: 100%;
  padding-right: 0;
  margin: 0 0 10px 0;
`;

const InfoSection = ({
  lightBg,
  id,
  imgStart,
  topLine,
  lightText,
  headline,
  darkText,
  description,
  buttonLabel,
  img,
  alt,
}) => {
  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>
    </>
  );
};

export default InfoSection;

Upvotes: 0

Views: 91

Answers (1)

Farhan Asif
Farhan Asif

Reputation: 158

You need to import an image from path and pass to img, like:

import myImage 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 acces to our exclusive app that allows you to sen unlimited transactions without getting charged any fees',
    buttonLabel:'Get started',
    imgStart:false,
    img: myImage,
    alt:'Car',
    dark:true,
    primary:true,
    darkText:false
};

And you are also calling your img in the wrong way please give it an object reference like homeObjOne.img so it works.

 <ImgWrap>
       <Img src={homeObjOne.img} alt={alt} />
 </ImgWrap>

Upvotes: 2

Related Questions