来自Web的图像不显示显示

Question

我正在构建一个简单的网站，并尝试 src slider中的任何图像（示例此图像），但根本不显示。

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

它看起来像 image 只是一个样式的div：

const Image = styled.div``;

这将与写作相同（不起作用）：

<div src="..." />

相反，请尝试更改 image 为样式img ：

const Image = styled.img``;

Answer 2

在JSX中，您应该使用 {} 进行属性值。例如＆lt; image src = {img.jpg} /＆gt; < /code>，

请进行此更改：

<Image src={https://images.unsplash.com/photo-1611690398208-18158228b6ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80} />