使用样式化的组件我在显示图像时卡住了。我不知道哪里出了问题答案

【问题标题】：using styled components i got stuck while displaying a image. i don't know where things went wrong使用样式化的组件我在显示图像时卡住了。我不知道哪里出了问题
【发布时间】：2022-02-11 21:35:48
【问题描述】：

这是我的代码，我试图在我的文档上显示图像，但它不可见：样式组件有问题，或者我在某处放置了错误

此代码来自我正在练习电子商务的 lama dev React 电子商务视频 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

我的代码没有错误，但我无法查看图像

【问题讨论】：

您将styled.div 用于Image 组件，然后将src 属性传递给Image(div 元素) 组件。请改用styled.img

标签： css reactjs styled-components

【解决方案1】：

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

我猜？

【讨论】：

【解决方案2】：

在这里，我可以在代码中看到 div 组件用于样式化组件来显示图像。

只需替换以下代码：

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

下面的代码

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

【讨论】：

谢谢你拯救了我的一天??