Ustawianie obrazu tła za pomocą React Inline Style

290

Próbuję uzyskać dostęp do obrazu statycznego, aby użyć go we backgroundImagewłaściwości inline w React. Niestety, wyczerpałem się, jak to zrobić.

Ogólnie myślałem, że zrobiłeś tak:

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 z <img>tagami. Czy ktoś może wyjaśnić różnicę między nimi?

Przykład:

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

Dziękuję Ci!

javascript reactjs

— Kris
źródło

476

Nawiasy klamrowe wewnątrz właściwości backgroundImage są nieprawidłowe.

Prawdopodobnie używasz webpacka wraz z programem ładującym pliki obrazów, więc tło powinno być już ciągiem znaków: backgroundImage: "url(" + Background + ")"

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

backgroundImage: `url(${Background})`

— rgommezz
źródło

Powinienem był dodać to do mojego pytania. Mam ustawioną szerokość i wysokość (odpowiednio 100% / 400px). Pojawiający się problem wynika z tego, jak reaguję, jak sądzę, na obsługę obrazów statycznych.

— Kris,

Czy należy łączyć znaki „(”, „)” i białe znaki w zmiennej Background przed konkatenacją zgodnie z w3.org/TR/CSS2/syndata.html#value-def-uri ?

— qbolec

50

Pełna składnia powinna wyglądać następująco:style={{backgroundImage: "url(" + Background + ")"}}

— mike

2

aby rozwinąć komentarz @ mike, potrzebujesz podwójnie nawiasów klamrowych, ponieważ jednym z nich jest React, aby wejść w tryb JS, a drugi to oznaczenie nowego obiektu.

— Ciprian Tomoiagă,

Pojawia się błąd „Sekcja” jest zdefiniowana, ale nigdy nie używana ”po podaniu tego importu Tło z„ ./background.jpg ”; var sectionStyle = {szerokość: „100%”, wysokość: „400px”, backgroundImage: url(${Background})}; klasa Sekcja rozszerza Component {render () {return (<section style = {sectionStyle}> </section>); }}

— Pavanan MS

41

Jeśli używasz ES5 -

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

Jeśli używasz ES6 -

backgroundImage: `url(${Background})`

Zasadniczo działa usuwanie niepotrzebnych nawiasów klamrowych przy jednoczesnym dodawaniu wartości do właściwości właściwości backgroundImage

— Rushikesh Bharad
źródło

2

Dla mnie w ES6 było backgroundImage: `url("${Background}")`tak, ponieważ twój przykład ES6 nie działał dla mnie.

— S ..

Witaj Bharad, jak byś to zrobił, jeśli chcesz dodać więcej niż jeden obraz tła. Powiedz dwa zdjęcia, jak byś to zrobił? Dzięki

— W drodze do sukcesu

37

Styl wbudowany, aby ustawić dowolny obraz na pełnym ekranie:

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'
}}

— Hitesh Sahu
źródło

17

Możesz również przenieść obraz do komponentu za pomocą require()funkcji.

Zwróć uwagę na dwa zestawy nawiasów klamrowych . Pierwszy zestaw służy do wchodzenia w tryb reagowania, a drugi do oznaczania obiektu

— Zdradliwy
źródło

Co jeśli ścieżka obrazu to internetowy adres URL zamiast ścieżki lokalnej? Coś w styluhttps://images.com/myimage.png

— Aminu Kano

3

Ok, rozumiem, kiedy korzystam z internetowego adresu URL. Powinienem tylko napisaćurl(https://images.com/myimage.png)

— Aminu Kano,

4

Zamiast tego możesz użyć literałów szablonów (dołączonych tyłem: `...`) dla backgroundImagetakich właściwości:

backgroundImage: `url(${Background})`

— Fawaz Abdulla
źródło

3

Spróbuj tego:

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

— Hamza Khan
źródło

2

Dla mnie działało to tak

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

— brianokinyi
źródło

-1

Możesz spróbować usimg

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

— Jamilur Rahman
źródło

Nie jest to zalecane, ponieważ uniemożliwi to webpackowi poznanie zasobu. To zakończy się brakiem pamięci podręcznej, jeśli aplikacja reagowania zostanie otwarta w trybie offline.

— Thomas Kekeisen