Bagaimana untuk Menetapkan Imej Latar Belakang Secara Dinamik dalam AngularJS Tanpa Ralat?

Menyelesaikan Ralat Latar Belakang Imej dalam AngularJS

Dalam AngularJS, ng-src berfungsi sebagai perlindungan terhadap ralat URL yang tidak sah sebelum penilaian berubah. Walau bagaimanapun, untuk imej latar belakang dalam elemen DIV, penggunaan sifat saiz latar belakang CSS3 memberikan cabaran apabila pembolehubah dimasukkan ke dalam URL.

Isu ini boleh mengakibatkan banyak mesej ralat disebabkan tafsiran penyemak imbas terhadap imej tidak sah URL. Walaupun pendekatan kasar menggunakan {{"style='background-image:url(myVariableUrl)'"}} adalah mungkin, ia tidak dianggap sebagai penyelesaian yang elegan.

Penyelesaian:

Untuk menyelesaikan isu ini, kod AngularJS berikut boleh digunakan:

<code class="html"><li ng-style="{'background-image':'url(/static/'+imgURL+')'}">...</li></code>

Kod ini menetapkan imej latar belakang menggunakan arahan gaya ng, di mana URL dijana secara dinamik daripada pembolehubah imgURL . Awalan '/statik/' dan petikan tunggal adalah penting untuk pembinaan URL yang betul. Dengan memasukkan kod ini, anda boleh mengelakkan ralat latar belakang imej dengan berkesan sambil mengekalkan kawalan ke atas URL imej melalui pembolehubah.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Imej Latar Belakang Secara Dinamik dalam AngularJS Tanpa Ralat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!