Bagaimana untuk Merujuk Imej Statik dengan Betul untuk Penggayaan Imej Latar Belakang dalam React?

Mengakses Imej Statik untuk BackgroundImage dalam React

Pembangun mungkin menghadapi cabaran mengakses imej statik untuk penggayaan imej latar belakang sebaris dalam aplikasi React. Pendekatan sintaks biasa berikut cuba merujuk imej yang diimport:

<code class="javascript">import Background from '../images/background_image.png';

const sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};</code>

Sementara pendekatan ini berfungsi dengan sempurna untuk tag, ia gagal apabila digunakan pada penggayaan imej latar belakang. Perbezaan utama terletak pada penggunaan pendakap kerinting yang tidak betul dalam sifat backgroundImage.

Untuk menyelesaikan isu ini, sintaks yang betul harus meninggalkan pendakap kerinting dan memastikan Latar Belakang ialah Rentetan yang telah diproses (mungkin difasilitasi oleh ketiga- alat parti seperti pek web dan pemuat fail imej).

<code class="javascript">backgroundImage: "url(" + Background + ")"</code>

Sebagai alternatif, pembangun boleh memanfaatkan templat rentetan ES6 untuk mencapai hasil yang sama:

<code class="javascript">backgroundImage: `url(${Background})`</code>

Dengan melaksanakan pengubahsuaian ini, pembangun boleh berjaya rujuk imej statik untuk penggayaan imej latar belakang dalam aplikasi React mereka.

Atas ialah kandungan terperinci Bagaimana untuk Merujuk Imej Statik dengan Betul untuk Penggayaan Imej Latar Belakang dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!