Angular bir projeye görüntü (ve diğer varlıklar) nasıl yüklenir?

109

Angular'da oldukça yeniyim, bu yüzden bunu yapmak için en iyi uygulamanın ne olduğundan emin değilim.

ng new some-projectYeni bir uygulama oluşturmak için açısal-cli kullandım .

İçinde "varlıklar" klasöründe bir "resimler" klasörü oluşturdu, bu nedenle artık resimler klasörüm src/assets/images

In app.component.html(benim uygulamanın kök olan), ben koymak

<img class="img-responsive" src="assets/images/myimage.png">

Ben ne zaman ng servebenim web uygulamasını görüntülemek için, görüntü göstermez.

Angular uygulamasında resim yüklemek için en iyi uygulama nedir?

DÜZENLEME: Aşağıdaki yanıta bakın. Gerçek resim adım, Angular'ın beğenmediği boşluklar kullanıyordu. Dosya adındaki boşlukları kaldırdığımda, resim düzgün görüntüleniyordu.

html angular angular-cli

— kullanıcı3183717
kaynak

1

evet haklısın, varlıklar besleyiciden doğru yol sözdizimini verdin, adın uyuşmazlığıyla ilgili bir sorun olabilir, görüntünün olup olmadığını kontrol et

— Pardeep Jain

1

Kesinlikle bir ad uyuşmazlığı değil, publicdışında bir klasör oluşturdum srcve görüntüyü şu şekilde görüntüledim<img class="img-responsive" src="../../public/images/myimage.png">

— user3183717

Onu düzeltti. Gerçek görüntü dosyası adımın içinde boşluklar vardı ve her ne sebeple olursa olsun Angular bundan hoşlanmadı. Dosya adımdaki boşlukları kaldırdığımda assets/images/myimage.pngçalıştı.

— user3183717

1

good :) btw Güncelleştirilmiş cli'de fazladan ortak klasör oluşturmaya gerek yok, zaten asstes ile aynı ada sahipler.

— Pardeep Jain

Diğer uzantılara sahip dosyalarla benzer bir sorun .sgfyaşıyorum (örneğin ) Bu dosyaları barındırmak ve uygulamadan bunlara bağlantı vermek istiyorum, ancak görünüşe göre onları assetsklasöre koymak yeterli değil. Herhangi bir fikir ?

— bvdb

75

Onardım. Gerçek görüntü dosyası adımın içinde boşluklar vardı ve her ne sebeple olursa olsun Angular bundan hoşlanmadı. Dosya adımdaki boşlukları kaldırdığımda assets/images/myimage.pngçalıştı.

— kullanıcı3183717
kaynak

63

Projemde app.component.html dosyamda aşağıdaki sözdizimini kullanıyorum:

<img src="/assets/img/1.jpg" alt="image">

veya

<img src='http://mruanova.com/img/1.jpg' alt='image'>

enterpolasyon kullanarak bir özelliği bağlarken şablon ifadesi olarak [src] kullanın:

<img [src]="imagePath" />

aynıdır:

<img src={{imagePath}} />

Kaynak: ngFor'de açısal 2'de img src nasıl bağlanır?

— Mruanova
kaynak

1

app.component.html ve varlıklar klasörünüz aynı seviyede mi?

— Halil

Hayır, klasör yapısı otomatik olarak oluşturulur ve benimle aynı klasörlere sahip olmalısınız: proje klasörü \ src \ assests \ ve proje klasörü \ app \ app.component.html bu yardımcı olursa lütfen oy verin.

— mruanova

26

Angular-cli, varsayılan olarak oluşturma seçeneklerinde varlıklar klasörünü içerir. Bu sorunu, resimlerimin adında boşluk veya tire olduğunda aldım. Örneğin :

My-image-name.png ',' myImageName.png 'olmalıdır
"resmim adı.png", "GörüntüAdım.png" olmalıdır

Görüntüyü assets / img klasörüne koyarsanız, bu kod satırı şablonlarınızda çalışmalıdır:

<img alt="My image name" src="./assets/img/myImageName.png">

Sorun devam ederse, sadece Angular-cli yapılandırma dosyanızın olup olmadığını kontrol edin ve varlıklar klasörünüzün oluşturma seçeneklerine eklendiğinden emin olun.

— Jmuhire
kaynak

1

[alt] dizeler için gerekli değildir, [] veri bağlama içindir.

— chris_r

14

Angular2'den 5'e özel olarak, aşağıdaki gibi özellik bağlamayı kullanarak görüntü yolunu bağlayabiliriz. Görüntü yolu, tek tırnak işaretleri içine alınır.

Örnek örnek

<img [src]="'assets/img/klogo.png'" alt="image">

— Bhuwan Maharjan
kaynak

src = "assets / img / klogo.png" ve [src] = "'assets / img / klogo.png'" arasındaki fark nedir?

— gdbj

@gdbj cevabı işte burada stackoverflow.com/questions/41426974/…

— mohit uprim

Bu nedenle, temelde, bu yöntemi kullanarak src'yi değiştirebilmek istiyorsak modele bağlanmak için [src] kullanırız.

— gdbj

Konuyu cevapladığınız için teşekkürler mohit. @gdbj Umarım kafa karışıklıklarını şimdiye kadar sıralamışsındır.

— Bhuwan Maharjan

Gelecekteki okuyuculara gdbj tarafından buradaki ilk yorumdaki iç tek alıntıları aramaya dikkat çekmek isterim. Yorum yazı tipinde görmek, yukarıdaki cevapta olduğundan daha zordur, ancak bunları kaçırmak bazı karışıklıklara yol açabilir. (Tarayıcınıza bağlı olabilir, emin değilim.)

— SilithCrowe

7

Normalde "uygulama", uygulamanızın köküdür - denediniz app/path/to/assets/img.pngmi?

— Chrispy
kaynak

açısal-cli appve assetsklasörleri ayrı ayrı srcklasörün altına koyun . (üzgünüm, klasör yapısını ve adlarını nasıl biçimlendirmem gerektiğini

— bilmiyorum

6

1. Bu satırı bileşenin üstüne ekleyin.

declare var require: any

2. bu satırı bileşen sınıfınıza ekleyin.

imgname= require("../images/imgname.png");

html sayfasındaki img src etiketine bu 'imgname' ekleyin.

<img src={{imgname}} alt="">

— Bheem Singh
kaynak

bu, düz olmayan dosya hiyerarşisi ağaçları için daha iyidir.

— chris_r

-1

benim için "Ben", "Görüntüler" de başkaydı. ki bu da açısal klibi beğenmedi. bu yüzden aynı zamanda büyük / küçük harfe duyarlıdır.

— Anonim Oluşturan
kaynak

Emin değil. insanlar neden olumsuz oy kullanmaktan hoşlanıyor. Bu benim karşılaştığım gerçek bir sorundu. Ve yine de olumsuz oy verildi. Neden bazı sorularımın cevapsız olduğunu ve insanların sorunu çözmek için oraya oy vermediğini merak ediyorum?

— Anonim İçerik Üretici

-1

Her zaman, statik kaynağın yoluna (bu durumda görüntü) atıfta bulunan html dosyanızın nerede olduğuna bağlıdır.

Örnek A:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

Gördüğünüz gibi, sayfanız.html kökten (src klasörü) bir klasör uzaktadır, bu nedenle köke geri dönmek için bir miktar ../ gerekir, ardından kökten görüntüye yürüyebilirsiniz:

<img class="img-responsive" src="../assests/images/myimage.png">

Örnek B:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

Burada ağaçta 2 klasöre gitmelisiniz:

<img class="img-responsive" src="../../assests/images/myimage.png">

— Sznczy
kaynak