Ustawianie obrazu tła za pomocą Reaktorowych stylów liniowych

Question

Próbuję uzyskać dostęp do statycznego obrazu do użycia wewnątrz wbudowanej właściwości backgroundImage w React. Niestety, podbiegłam sucho, jak to zrobić.

Generalnie, myślałem, że po prostu nie sposób następujący:

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> 
    ); 
    } 
} 

Działa to dla <img> tagów. Czy ktoś może wyjaśnić różnicę między tymi dwoma?

Przykład:

<img src={ Background } /> działa dobrze.

Dziękujemy!

Answer 1

Kręcone nawiasy wewnątrz właściwości backgroundImage są nieprawidłowe.

Prawdopodobnie używasz WebPACK wraz z plików graficznych ładowarki, więc Tło powinno być już String: backgroundImage: "url(" + Background + ")"

Można również użyć ES6 szablony ciąg jak poniżej, aby osiągnąć ten sam efekt:

backgroundImage: `url(${Background})` 

Answer 2

Obraz można również przesłać do komponentu za pomocą funkcji require().

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

** Uwaga dwa zestawy nawiasach klamrowych.