REACT: встроенный стиль JSX: невозможно отобразить изображение через свойство стиля backgroundImage - PullRequest
Новая
       6

REACT: встроенный стиль JSX: невозможно отобразить изображение через свойство стиля backgroundImage

0 голосов
/ 01 декабря 2018

Невозможно отобразить изображение с помощью свойства стиля backgroundImage, но оно может правильно отобразить изображение в теге src image. 

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;

Я мог видеть подобное сообщение здесь, но это не помогает. создать приложение реакции, не загружающее фоновые изображения css в dev или build

Оба стиля не работают

Style1: 

 style={ umberllaStyle }

Стиль2: 

 style={{backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg)'}}

Но это работает 

 <img src={umberlla} alt="text"></img>
...