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

Question

我想动态更改背景图像，当我尝试它时，它不起作用，但是当我在 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});
`;

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

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

如果我使用网络图像（网址喜欢“ https://syean.cn/img/avatar.jpg ”），它也可以工作

原文由 syean 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将您的文件移动到公用文件夹中并尝试以下命令：

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

原文由 Leri Gogsadze 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

React、Gatsby 和 Next.js 通常都使用 Webpack，它会在部署之前编译您的网站。他们将缩小图像并更改每个图像的路径。

为了让图像正确加载，您必须动态引用它们作为导入。这样，变量 URL 在 Webpack 完成它的事情后仍然有效。

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

原文由 Naved Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议