Bir Satır İçi Çizgi Çizgisi Stilleri Oluşturmak

Question

Bir Tepegöz içinde backgroundImage özelliğinin içinde kullanmak için statik görüntüye erişmeye çalışıyorum. Ne yazık ki, bunu nasıl yapacağım konusunda kuru kaldım.

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> etiketleri için çalışır:

Genellikle, şöyle yaptığının düşündük. Birisi ikisi arasındaki farkı açıklayabilir mi?

Örnek:

<img src={ Background } /> inşaat iyi.

Teşekkür ederiz!

Answer 1

Arka planImage özelliği içindeki küme parantezleri yanlıştır. Muhtemelen

Eğer resim dosyaları yükleyici ile birlikte WebPack kullanırken, bu nedenle Arkaplan zaten String olmalıdır: backgroundImage: "url(" + Background + ")"

Ayrıca aynı etkiyi elde etmek için aşağıda ES6 dize şablonları kullanabilirsiniz:

backgroundImage: `url(${Background})` 

Answer 2

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

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

** süslü parantez iki set unutmayın.