简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

Bagaimana untuk menggunakan imej latar belakang dengan ngStyle dengan betul dalam Angular 2?

Mary-Kate Olsen
Lepaskan： 2024-10-30 22:12:02
asal
253 orang telah melayarinya

How to Properly Apply a Background Image with ngStyle in Angular 2?

Memohon Imej Latar Belakang dengan ngStyle dalam Angular 2

Apabila cuba menambah imej latar belakang menggunakan ngStyle dalam Angular 2, anda mungkin menghadapi masalah di mana kod anda gagal berfungsi. Isu ini biasanya timbul disebabkan oleh sintaks yang tidak betul dalam ungkapan ngStyle.

Untuk berjaya menambah imej latar belakang menggunakan ngStyle, anda harus membina ungkapan anda seperti berikut:

<code class="ts"><div [ngStyle]="{'background-image': 'url(' + photo + ')'}"</div></code>
Salin selepas log masuk

Dalam coretan kod awal anda , anda telah meninggalkan petikan tunggal yang disertakan untuk URL. Pembetulan ini memastikan bahawa Angular 2 mentafsir URL dengan betul dan menetapkannya sebagai imej latar belakang untuk elemen.

Dengan mematuhi sintaks ini, anda boleh menggunakan imej latar belakang dengan berkesan pada elemen menggunakan ngStyle dalam aplikasi Angular 2 anda.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan imej latar belakang dengan ngStyle dengan betul dalam Angular 2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php.cn
Artikel sebelumnya：Bagaimana untuk Meletakkan Ikon di Atas Imej atau Video dan Mencetuskan Muat Turun pada Klik? Artikel seterusnya：Bagaimana Membuat Keseluruhan Item Senarai Boleh Diklik dalam Bar Navigasi?
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
2
1724
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
10
1880
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1591
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1508
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1546
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！