无法通过backgroundImage样式属性渲染图像,但能够在image src标签中正确渲染图像。
z[0][0][0] = 2
我可以在这里看到类似的帖子,但没有帮助。 create react app not loading css background images in dev or build
两种样式都不起作用
样式1:
import BannerAnim from 'rc-banner-anim';
import React from 'react';
import 'antd/dist/antd.less';
import 'rc-banner-anim/assets/index.css';
import './carousal.css';
import umberlla from '../../images/umb.jpg';
const { Element } = BannerAnim;
const BgElement = Element.BgElement;
const umberllaImage = '../../images/umb.jpg';
const umberllaStyle = {
backgroundImage: 'url(' + umberllaImage + ')',
backgroundSize: 'cover',
backgroundColor: '#364D79',
backgroundBlendMode: 'luminosity',
backgroundPosition: 'center',
};
function Carousal() {
return (
<div>
<BannerAnim type="across">
<BgElement
id="bg"
key="bg"
className="bg"
style={ umberllaStyle }
/>
<BgElement
key="bg"
className="bg"
style={{
backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg)',
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
/>
</BannerAnim>
<img src={umberlla} alt="text"></img>
</div>
);
}
export default Carousal;
样式2:
style={ umberllaStyle }
但这是可行的
style={{backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg)'}}