css - 图像未显示在我的 React 滑块中，样式化组件

Question

补充：我在控制台上没有收到任何错误......从功能上讲，除了图像和布局本身之外，我还没有实现任何东西。

我正在尝试在 React 中实现我自己的滑块。我已经检查过图像本身都工作正常。问题似乎来自组件。

下面是我的基本组件，滑块。

import React, { useState } from 'react';
import styled from 'styled-components';

import SliderContent from './SliderContent';
import Slide from './Slide';

const Wrapper = styled.div`
    width: 560px;
    margin: 0 auto;
    overflow: hidden;
`;

const Slider = ({ slides }) => {
    const getWidth = () => window.innerWidth;

    const [state, setState] = useState({
        translate: 0,
        transition: 0.45,
    });

    const { translate, transition } = state;
    const { setTranslate, setTransition } = setState;

    return (
        <Wrapper>
            <SliderContent
                translate={translate}
                translation={transition}
                width={getWidth() * slides.length}
            >
                {slides.map((slide, i) => (
                    <Slide key={slide + i} content={slide} />
                ))}
            </SliderContent>
        </Wrapper>
    );
};

export default Slider;

下面是它确定滑块大小的地方。

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
    transform: translateX(-${(props) => props.translate}px);
    transition: transform ease-out ${(props) => props.transition}s;
    height: 100%;
    width: ${(props) => props.width}px;
    display: flex;
`;

const SliderContent = () => {
    return <Wrapper>Test</Wrapper>;
};

export default SliderContent;

这是具有图像的实际组件。

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
    height: 100;
    width: 100%;
    background-size: cover;
    background-image: url('${(props) => props.content}');
    background-repeat: no-repeat;
    background-position: center;
`;

const Slide = ({ content }) => {
    console.log(content);
    return (
        <Wrapper>
            {content}
            <div>dfsfsdf</div>
        </Wrapper>
    );
};

export default Slide;

请指教。

标签： cssreactjsstyled-components