Tepki Satır İçi Stillerle Görüntü Ayarlama

backgroundImageReact içinde bir satır içi özelliği içinde kullanmak için statik bir görüntüye erişmeye çalışıyorum . Ne yazık ki, bunun nasıl yapılacağı konusunda kurudum.

Genel olarak, aşağıdaki gibi yaptığınızı sanıyordum:

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

Bu, <img>etiketler için geçerlidir. Birisi ikisi arasındaki farkı açıklayabilir mi?

Misal:

<img src={ Background } /> gayet iyi çalışıyor.

Teşekkür ederim!

BackgroundImage özelliğinin içindeki süslü ayraçlar yanlış.

Muhtemelen webpack'i görüntü dosyaları yükleyicisiyle birlikte kullanıyorsunuz, bu nedenle Arka Plan zaten bir Dize olmalıdır: backgroundImage: "url(" + Background + ")"

Aynı efekti elde etmek için aşağıdaki gibi ES6 dize şablonlarını da kullanabilirsiniz:

backgroundImage: `url(${Background})`

ES5 kullanıyorsanız -

backgroundImage: "url(" + Background + ")"

ES6 kullanıyorsanız -

backgroundImage: `url(${Background})`

Temel olarak backgroundImage özellik çalışmalarına değer eklerken gereksiz kıvırcık parantez kaldırmak çalışır.

Herhangi bir görüntüyü tam ekran ayarlamak için satır içi stil:

style={{  
  backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat'
}}

Ayrıca require()işlevi kullanarak görüntüyü bileşene getirebilirsiniz .

<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>

İki küme küme parantezine dikkat edin . İlk küme reaksiyon moduna girmek, ikinci küme nesneyi göstermek içindir

Bunun backgroundImagegibi özellik için Şablon Değişmezlerini (geri işaretiyle çevrili: `...`) kullanabilirsiniz :

backgroundImage: `url(${Background})`

bunu dene:

style={{ backgroundImage: `url(require("path/image.ext"))` }}

Benim için işe yarayan şey böyle olması

style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}

Usimg deneyebilirsiniz

backgroundImage: url(process.env.PUBLIC_URL + "/      assets/image_location")