Rasmiy (va boshqa aktivlarni) angular 2 loyihasida qanday yuklash mumkin?

Men Angliyaga juda yoqdi, shuning uchun buni amalga oshirishning eng yaxshi usuliga amin emasman.

Yangi ilovani yaratish uchun ochilgan-cli va yangi ng new project dan foydalanganman.

In it created an "images" folder in the "assets" folder, so now my images folder is src/assets/images

app.component.html ilovasida (mening ilova ildiz)


Veb-ilovani ko'rish uchun ng xizmatini qilsam, rasm ko'rsatilmaydi.

Rasmlarni burchakli ilovada yuklab olishning eng yaxshi usuli qanday?

EDIT: Quyidagi javobni ko'ring. Mening haqiqiy rasmim bo'shliqlardan foydalangan, burchak yoqmagan. Fayl nomidagi joylarni bo'shatganimda, tasvir to'g'ri ko'rsatildi.

30
Ha, siz haqsiz, siz aktivlar fodderidan to'g'ri yo'l sintaksisi bergansiz, ismingiz nomuvofiqligi bilan bog'liq muammo bo'lishi mumkin, rasm mavjud yoki yo'qligini tekshirib ko'ring
qo'shib qo'ydi muallif Pardeep Jain, manba
Yaxshi :) btw, yangilangan "cli" da umumiy jildni yaratishga hojat yo'q, ular allaqachon "asstes" deb nomlangan.
qo'shib qo'ydi muallif Pardeep Jain, manba
Boshqa kengaytmali fayllar bilan bir xil muammolarga egamiz (masalan, .sgf ) Men ushbu fayllarni joylashtirishni va ularni dasturdan bog'lashni istayman, lekin ko'rinishda oddiygina aktivlari > papkasi etarli emas. Har qanday fikr bormi?
qo'shib qo'ydi muallif bvdb, manba
src dan tashqarida public papkasini yaratish va tasvirni
qo'shib qo'ydi muallif user3183717, manba
Ruxsat etilgan. Haqiqiy rasm fayli unda bo'sh joylar bor edi va qandaydir sababga ko'ra bu burchak yoqmadi. Fayl nomimdan bo'shliqni chiqarganimda aktivlar/images/myimage.png ishladi.
qo'shib qo'ydi muallif user3183717, manba

6 javoblar

Men uni tuzatdim. Haqiqiy rasm fayli unda bo'sh joylar bor edi va qandaydir sababga ko'ra bu burchak yoqmadi. Fayl nomimdan bo'shliqni chiqarganimda aktivlar/images/myimage.png ishladi.

26
qo'shib qo'ydi

Mening loyihamda app.component.html-dagi quyidagi sintaksisini ishlataman:

image

yoki

image

Enterpolatsiyani ishlatib, bir xususiyatni bog'lab turganingizda [src] shablonini ifodalash uchun foydalaning:


quyidagicha:


Source: how to bind img src in angular 2 in ngFyoki?

10
qo'shib qo'ydi
Siz nisbatan yo'lni ishlatasiz. Mutlaq yo'lni ishlatish mumkinmi?
qo'shib qo'ydi muallif Halil, manba
app.component.html va aktivlar papkangiz bir xil darajadadir?
qo'shib qo'ydi muallif Halil, manba
Ha, javobimni tahrir qildim.
qo'shib qo'ydi muallif mruanova, manba
Yo'q, papkaning tuzilishi avtomatik ravishda yaratiladi va sizdan yuqoriroq papkalarga ega bo'lishingiz kerak: project-folder \ src \ assests \ and project-folder \ app \ app.component.html, agar u yuqoriga xush keltirishga yordam bersa.
qo'shib qo'ydi muallif mruanova, manba

Odatda "ilova" sizning arizangizning ildizidir - siz app/path/to/assets/img.png ni sinab ko'rdingizmi?

5
qo'shib qo'ydi
src papkasida burchak-kliplar ilovasi va aktivlari papkalarni alohida-alohida qo'ying. (afsus, men qanday qilib papkaning tuzilishi va nomlarini formatlashim kerakligini bilmayman)
qo'shib qo'ydi muallif user3183717, manba

Angular2 dan 5 ga aniq bo'lgan holda, biz rasm yo'lini quyidagi kabi xususiyatni ulash orqali bog'lashimiz mumkin. Rasm yo'li bitta tirnoq belgisi bilan qo'shiladi.

Misol namunasi

image

5
qo'shib qo'ydi
qo'shib qo'ydi muallif mohit uprim, manba
src = "aktiv/img/klogo.png" va [src] = "'assets/img/klogo.png' 'o'rtasidagi farq nima?
qo'shib qo'ydi muallif gdbj, manba
shuning uchun asosan src ni ushbu usul yordamida o'zgartirishni istasak, biz modelga ulanish uchun [src] dan foydalanamiz.
qo'shib qo'ydi muallif gdbj, manba
Gdbj tomonidan bu erda birinchi izohda ichki tek tirnoqlarni qidirish uchun kelajakdagi o'quvchilarga ishora qilishni istardim. Ular yuqorida keltirilgan javoblardan ko'ra sharhlar shriftida ko'rishni qiyinlashtiradi, lekin ularni yo'qotish ba'zi tartibsizliklarga olib kelishi mumkin. (Brauzeringizga bog'liq bo'lishi mumkin, ishonch emas.)
qo'shib qo'ydi muallif SilithCrowe, manba
Mavzuga javob berganingiz uchun rahmat. @gdbj Umid qilamanki, hozir sizning tartibsizliklaringiz tartiblangan.
qo'shib qo'ydi muallif Bhuwan Maharjan, manba

Burchak-kesma sukut bo'yicha qurish variantlarida aktivlar papkasini o'z ichiga oladi. Mening suratlarimning nomi bo'shliqlar yoki chiziqlar bo'lsa, men bu masalani oldim. Misol uchun :

  • 'my-image-name.png' bo'lishi kerak 'myImageName.png'
  • "image image.png" "myImageName.png" bo'lishi kerak

Rasmni aktivlar/img papkasida joylashtirsangiz, ushbu kod satri shablonlaringizda ishlaydi:


Muammo davom etsa, burchak-cli konfiguratsiya faylini tekshiring va aktivlar papkasini qurish variantlariga qo'shilganligiga ishonch hosil qiling.

0
qo'shib qo'ydi

1. Ushbu qatorni tarkibiy qismga qo'shing.

declare var require: any

2. ushbu satrni komponent sinfiga qo'shing.

imgname= require("../images/imgname.png");
  1. add this 'imgname' in img src tag on html page.

0
qo'shib qo'ydi
Angular Uzbekistan
Angular Uzbekistan
107 ishtirokchilar

Guruh Angular bo'yicha muloqot qilish uchun ochilgan Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs

ngTashkent
ngTashkent
77 ishtirokchilar

Правила просты: 1. Не хамить 2. Не хейтить 3. Реакт не нужен Ссылки: https://t.me/angular_ru - старший брат https://t.me/angular_uz - ангулар на узбекском @js_uzb @vuejs_uz @react_uz @nodejs_uz @yiiframework_uz @uzdevgroup @UzDev_Jobs @tasdev_talks