Mengatur backgroundImage Dengan React Inline Styles

290

Saya mencoba mengakses gambar statis untuk digunakan dalam backgroundImageproperti inline dalam Bereaksi. Sayangnya, saya sudah kehabisan cara untuk melakukan ini.

Secara umum, saya pikir Anda baru saja melakukan hal berikut:

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

Ini berfungsi untuk <img>tag. Bisakah seseorang menjelaskan perbedaan di antara keduanya?

Contoh:

<img src={ Background } /> berfungsi dengan baik.

Terima kasih!

javascript reactjs

— Keris
sumber

476

Kurung kurawal di dalam properti backgroundImage salah.

Mungkin Anda menggunakan webpack bersama dengan pemuat file gambar, jadi Background seharusnya sudah menjadi String: backgroundImage: "url(" + Background + ")"

Anda juga dapat menggunakan templat string ES6 seperti di bawah ini untuk mendapatkan efek yang sama:

backgroundImage: `url(${Background})`

— rgommezz
sumber

Saya seharusnya menambahkan itu ke pertanyaan saya. Saya memiliki set lebar dan tinggi (masing-masing 100% / 400px). Masalah yang timbul adalah karena bagaimana reaksi menangani gambar statis yang saya percaya.

— Kris

Haruskah seseorang melarikan diri dari karakter '(",') 'dan spasi putih dalam variabel Latar Belakang sebelum penggabungan sesuai w3.org/TR/CSS2/syndata.html#value-def-uri ?

— qbolec

50

Sintaks lengkapnya akan terlihat seperti ini:style={{backgroundImage: "url(" + Background + ")"}}

— mike

2

hanya untuk memperluas komentar @ mike, Anda perlu kurung kurawal ganda karena satu untuk React untuk masuk adalah mode JS dan satu untuk menunjukkan objek baru.

— Ciprian Tomoiagă

Saya mendapatkan kesalahan 'Bagian' didefinisikan tetapi tidak pernah digunakan 'setelah memberikan Latar belakang impor ini dari' ./background.jpg '; var sectionStyle = {width: "100%", tinggi: "400px", backgroundImage: url(${Background})}; Bagian kelas memperluas Komponen {render () {return (<section style = {sectionStyle}> </section>); }}

— Pavanan MS

41

Jika Anda menggunakan ES5 -

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

Jika Anda menggunakan ES6 -

backgroundImage: `url(${Background})`

Pada dasarnya menghapus kurung kurawal yang tidak perlu sambil menambahkan nilai pada properti backgroundImage akan berfungsi.

— Rushikesh Bharad
sumber

2

Bagi saya di ES6 itu backgroundImage: `url("${Background}")`, karena contoh ES6 Anda tidak bekerja untuk saya.

— S ..

Halo Bharad, bagaimana Anda akan melakukannya jika Anda ingin menambahkan lebih dari satu gambar latar belakang. Katakan untuk dua gambar bagaimana Anda melakukan ini? Terima kasih

— Dalam perjalanan menuju sukses

37

Gaya sebaris untuk mengatur gambar layar penuh apa pun:

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
sumber

17

Anda juga dapat membawa gambar ke dalam komponen dengan menggunakan require()fungsi.

Perhatikan dua set kurung keriting . Set pertama adalah untuk masuk ke mode reaksi dan yang kedua adalah untuk menunjukkan objek

— Rumit
sumber

Bagaimana jika jalur gambar adalah URL web dan bukan jalur lokal? Sesuatu sepertihttps://images.com/myimage.png

— Aminu Kano

3

Ok saya mengerti, saat menggunakan URL berbasis web. Saya hanya harus menulisurl(https://images.com/myimage.png)

— Aminu Kano

4

Anda dapat menggunakan Literal Templat (terlampir dengan tanda centang-kembali: `...`) sebagai ganti backgroundImageproperti seperti ini:

backgroundImage: `url(${Background})`

— Fawaz Abdulla
sumber

3

coba ini:

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

— Hamza Khan
sumber

2

Bagi saya apa yang berhasil adalah seperti ini

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

— brianokinyi
sumber

-1

Anda dapat mencoba usimg

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

— Jamilur Rahman
sumber

Ini tidak disarankan karena akan mencegah webpack mengetahui aset tersebut. Ini akan berakhir dengan cache miss jika aplikasi reaksi dibuka offline.

— Thomas Kekeisen