React 在style.js中使用图片链接

最新推荐文章于 2024-11-04 20:18:04 发布

写代码的小哥哥

最新推荐文章于 2024-11-04 20:18:04 发布

阅读量489

点赞数

分类专栏： react

本文链接：https://blog.youkuaiyun.com/qq_36249659/article/details/104589083

版权

react 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用React和styled-components创建的推荐组件示例，展示了如何通过props传递图片URL并应用到组件背景中，实现推荐内容的展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Recommend.js


             <RecommendWrapper>
                <RecommendItem imgUrl='https://img-bss.youkuaiyun.com                              /202002271210055590.jpg'/>
                <RecommendItem imgUrl='https://img-bss.youkuaiyun.com/1582274713882.jpg'/>
            </RecommendWrapper>

style.js

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

   margin-top:10px;

`