web-dev-qa-db-ja.com

styled-componentで背景画像を変更する

BackgroundImageを動的に変更したいのですが、フォローしてみたところ機能しませんでしたが、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});  
`;

enter image description here

このように使用すると、機能しますが、画像を動的に変更することはできません。

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

ネットワーク画像を使用している場合（URLは " https://syean.cn/img/avatar.jpg "のようになります）でも機能します

reactjsstyled-components
3
syean

ファイルをパブリックフォルダーに移動し、次のコマンドを試してください。

<RecommendItem imgUrl={process.env.PUBLIC_URL + '/banner.png'} >
2
Leri Gogsadze
 import styled from 'styled-components';
import img from './img/bg.gif';

const Content = styled.div`
  border: 1px solid #000;
  background-image: url(${img});
  width: 2000px;
  height: 2000px;
`;
6
Naved Khan