Question

无法通过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)'}}

REACT：JSX内联样式：无法通过backgroundImage样式属性呈现图像

0 个答案: