using styled components i got stuck while displaying a image. i don't know where things went wr-CodePudding

here is my code I am trying to display an image on my document but it is not visible: is something wrong with the styled component or I have placed something wrong somewhere

this code is from the lama dev React e-commerce video I am practicing that eCommerce https://youtu.be/c1xTDSIXit8

import { ArrowLeftOutlined, ArrowRightOutlined } from '@material-ui/icons'
import React from 'react'
import styled from "styled-components"
import dummy from '../img/girl.png'

const Container=styled.div`
    height:100vh;
    width:100%;
    display:flex;
    position:relative;
    `
const Arrow= styled.div`
    width:50px;
    height:50px;
    background-color:#fff7f7;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:0;
    bottom:0;
    left: ${props=>props.direction === 'left' && '15px'};
    right: ${props=>props.direction === 'right' && '15px'};
    margin:auto;
    cursor:pointer;
    opacity:0.5;
    `
const Wrapper=styled.div`
height:100%;
`
const Slide= styled.div`
width:100vw:
height:100vh;
display:flex;
align-items:center;
`
const ImgContainer= styled.div`
height:100%;
flex:1;
`
const Image= styled.div`
height:80%;
`
const InfoContainer= styled.div`
flex:1;
padding:50px;
`
const Title= styled.h1``
const Description= styled.p``
const Button= styled.button``


const Slider = () => {
  return (
    <Container>
        <Arrow direction='left'>
            <ArrowLeftOutlined/>
        </Arrow>
        <Wrapper>
            <Slide>
            <ImgContainer>
                <Image src={dummy}/>
            </ImgContainer>
            <InfoContainer>
                <Title>SUMMER SAL</Title>
                <Description>DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS.</Description>
                <Button>SHOW NOW</Button>
            </InfoContainer>
            </Slide>
        </Wrapper>
        <Arrow direction='right'>
            <ArrowRightOutlined/>
        </Arrow>
    </Container>
  )
}

export default Slider

there is no error in my code but I can't view the image

CodePudding user response：

const Image = styled.img`
height:80%;
`

I guess?

CodePudding user response：

Here, I can see in the code that the div component is used from styled components to display an image.

Simply replace the below code:

const Image= styled.div`
    height:80%;
`

With the below code

const Image= styled.img`
    height:80%;
`