Image from web doesn't display

Question

I'm building a simple site and trying to src any image from web in Slider (exemple this image) but it doesn't display at all.

import { ArrowLeftOutlined, ArrowRightOutlined } from "@material-ui/icons";
import styled from "styled-components";

const Container = styled.div`
  width: 100%;
  height: 100vh;
  display: flex;
  background-color: coral;
  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" && "10px"};
  right: ${(props) => props.direction === "right" && "10px"};
  cursor: pointer;
  margin: auto;
`;

const Wrapper = styled.div`
  height: 100%;
`;

const Slide = styled.div`
  display: flex;
  align-items: center;
`;

const ImgContainer = styled.div`
  flex; 1;
`;

const Image = styled.div``;

const InfoContainer = styled.div`
  flex: 1;
`;

const Slider = () => {
  return (
    <div>
      <Container>
        <Arrow direction="left">
          <ArrowLeftOutlined />
        </Arrow>
        <Wrapper>
          <ImgContainer>
            <Image src="https://images.unsplash.com/photo-1611690398208-18158228b6ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" />
          </ImgContainer>
          <InfoContainer></InfoContainer>
        </Wrapper>
        <Arrow direction="right">
          <ArrowRightOutlined />
        </Arrow>
      </Container>
    </div>
  );
};

export default Slider;

Answer 1

It looks like Image is just a styled div:

const Image = styled.div``;

This will be the same as writing (which doesn't work):

<div src="..." />

Instead, try changing Image to be a styled.img:

const Image = styled.img``;