gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 13:57:04 26 4
gpt4 key购买 nike

我想动态更改backgroundImage,当我尝试遵循as时,它不起作用,但是当我在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});
`;

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

最佳答案

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

为了使图像正确加载,您必须将它们作为导入动态引用。这样,在 Webpack 完成其工作后,变量 URL 仍然有效。

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

关于reactjs - 使用样式组件更改背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53920405/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com