小编sye*_*ean的帖子

使用样式组件更改背景图像

我想动态更改背景图像,当我尝试按照它进行操作时,它不起作用,但是当我在 chrome 中打开 devtools 时,可以显示该背景

<RecommendWrapper>
     <RecommendItem imgUrl="../../static/banner.png" >
     </RecommendItem>  
</RecommendWrapper>

export const RecommendItem = styled.div`
    width: 280px;
    height: 50px;
    background-size: contain;
    background: url(${(props)=>props.imgUrl});  
`;
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

如果我这样使用,它可以工作,但不能改变图像动态。

import banner from "../../statics/banner.png"
export const RecommendItem = styled.div`
    width: 280px;
    height: 50px;
    background-size: contain;
    background:url(${banner}); 
`;
Run Code Online (Sandbox Code Playgroud)

如果我使用网络图片(网址喜欢“ https://syean.cn/img/avatar.jpg ”),它也可以工作

reactjs styled-components

5
推荐指数
2
解决办法
4万
查看次数

标签 统计

reactjs ×1

styled-components ×1