Changer l'image d'arrière-plan avec un composant de style

Question

Je veux changer le backgroundImage dynamiclly, quand je l'essaye suivre comme, cela n'a pas fonctionné, mais quand j'ouvre les devtools en chrome, peut montrer ce fond

<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});  
`;

si j'utilise comme ça, cela peut fonctionner, mais ne peut pas changer la dynamique de l'image.

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

et si j'utilise une image réseau (l'url aime " https://syean.cn/img/avatar.jpg "), cela peut aussi fonctionner

Answer 1

Déplacez votre fichier dans un dossier public et essayez cette commande:

<RecommendItem imgUrl={process.env.PUBLIC_URL + '/banner.png'} >

Answer 2

 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;
`;