Question

我正在尝试使用样式组件设置背景图像。在下面的代码中，我想使用img_01，img_02，img_03，.....

设置具有不同div的背景图像。

我看到很多情况下导入img路径并使用它，但是我想根据变量使用动态名称。我是否需要导入所有图像并设置每个图像？

import styled, { css } from 'styled-components';

const Div1 = styled.div`
        width: ${props => props.width};
        background: url('asset/images/img_0${props=>props.num}.png');
    `;

class Main extends Component {
    render() {
        return (
            <div>
                <Div1 width={"475px"} num={1}>

                </Div1>
                <Div1 width={"154px"} num={2}>

                </Div1>

            </div>
        )
    }
}

如何在不全部导入的情况下做到这一点？

Answer 1

您可以这样写：

const Div1 = styled.div`
    width: ${props => props.width};
    background-image: ${props => `url('asset/images/img_0${props.num}.png')`};
`;

如何通过带有样式组件的动态名称设置背景图像？

1 个答案: