Bagaimana cara memuat gambar (dan aset lainnya) di Angular sebuah proyek?

107

Saya cukup baru di Angular jadi saya tidak yakin praktik terbaik untuk melakukan ini.

Saya menggunakan angular-cli dan ng new some-projectuntuk menghasilkan aplikasi baru.

Di dalamnya dibuat folder "gambar" di folder "aset", jadi sekarang folder gambar saya adalah src/assets/images

Di app.component.html(yang merupakan root aplikasi saya), saya meletakkan

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

Saat saya ng servemelihat aplikasi web saya, gambar tidak ditampilkan.

Apa praktik terbaik untuk memuat gambar dalam aplikasi Angular?

EDIT: Lihat jawaban di bawah. Nama gambar saya yang sebenarnya menggunakan spasi, yang tidak disukai Angular. Ketika saya menghapus spasi di nama file, gambar ditampilkan dengan benar.

html angular angular-cli pengguna3183717
sumber
1
ya Anda benar, Anda memberikan sintaks jalur yang benar dari aset fodler, mungkin ada masalah dengan nama Anda tidak cocok, periksa apakah gambar ada atau tidak
Pardeep Jain
1
Jelas bukan ketidakcocokan nama, saya akhirnya membuat publicfolder di luar srcdan menampilkan gambar dengan<img class="img-responsive" src="../../public/images/myimage.png">
user3183717
Diperbaiki. Nama file gambar saya yang sebenarnya memiliki spasi di dalamnya, dan untuk alasan apa pun Angular tidak menyukainya. Ketika saya menghapus spasi dari nama file saya, assets/images/myimage.pngberfungsi.
user3183717
1
bagus :) btw tidak perlu membuat folder publik tambahan di cli Diperbarui mereka sudah memiliki nama yang sama dengan asstes.
Pardeep Jain
Saya memiliki masalah yang sama dengan file dengan ekstensi lain (mis. .sgf) Saya ingin menyimpan file-file itu dan menautkannya dari aplikasi, tetapi tampaknya hanya memasukkannya ke dalam assetsfolder saja tidak cukup. Ada ide?
bvdb

Jawaban:

72

Aku telah memperbaikinya. Nama file gambar saya yang sebenarnya memiliki spasi di dalamnya, dan untuk alasan apa pun Angular tidak menyukainya. Ketika saya menghapus spasi dari nama file saya, assets/images/myimage.pngberfungsi.

pengguna3183717
sumber
62

Dalam proyek saya, saya menggunakan sintaks berikut di app.component.html saya:

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

atau

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

gunakan [src] sebagai ekspresi template saat Anda mengikat properti menggunakan interpolasi:

<img [src]="imagePath" />

sama dengan:

<img src={{imagePath}} />

Sumber: bagaimana cara mengikat img src di angular 2 di ngFor?

mruanova.dll
sumber
1
apakah folder app.component.html dan aset Anda berada di level yang sama?
Halil
Tidak, struktur folder dibuat secara otomatis dan Anda harus memiliki folder yang sama dengan saya: project-folder \ src \ assests \ dan project-folder \ app \ app.component.html jika ini membantu, harap upvote.
mruanova
26

Angular-cli menyertakan folder aset dalam opsi build secara default. Saya mendapat masalah ini saat nama gambar saya memiliki spasi atau garis. Sebagai contoh :

  • 'my-image-name.png' harus 'myImageName.png'
  • 'my image name.png' harus 'myImageName.png'

Jika Anda meletakkan gambar di folder assets / img, baris kode ini akan berfungsi di template Anda:

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

Jika masalah tetap ada, periksa apakah file konfigurasi Angular-cli Anda dan pastikan folder aset Anda ditambahkan dalam opsi build.

jmuhire
sumber
1
[alt] tidak diperlukan untuk string, [] untuk pengikatan data.
chris_r
14

Menjadi khusus untuk Angular2 hingga 5, kita dapat mengikat jalur gambar menggunakan properti mengikat seperti di bawah ini. Jalur gambar diapit oleh tanda kutip tunggal.

Contoh contoh

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

Bhuwan Maharjan
sumber
apa perbedaan antara src = "assets / img / klogo.png" dan [src] = "'assets / img / klogo.png'"?
gdbj
@gdbj di sini adalah jawabannya stackoverflow.com/questions/41426974/…
mohit uprim
jadi pada dasarnya, kami menggunakan [src] untuk mengikat model tersebut jika kami ingin dapat mengubah src menggunakan metode itu.
gdbj
Terima kasih mohit telah menjawab utas ini. @gdbj Saya harap Anda sudah menyelesaikan kebingungan Anda sekarang.
Bhuwan Maharjan
Hanya ingin menunjukkan kepada pembaca selanjutnya untuk mencari kutipan tunggal batin dalam komentar pertama di sini oleh gdbj. Mereka lebih sulit dilihat di font komentar daripada di jawaban di atas, tetapi melewatkannya dapat menyebabkan kebingungan. (Mungkin tergantung pada browser Anda, tidak yakin.)
SilithCrowe
7

Biasanya "app" adalah root dari aplikasi Anda - apakah Anda sudah mencobanya app/path/to/assets/img.png?

renyah
sumber
sudut-cli menempatkan appdan assetsfolder secara terpisah di bawah srcfolder. (maaf, saya tidak yakin bagaimana saya seharusnya memformat struktur dan nama folder)
user3183717
5

1. Tambahkan baris ini di atas komponen.

declare var require: any

2. tambahkan baris ini di kelas komponen Anda.

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

  1. tambahkan 'imgname' ini di tag img src pada halaman html.

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

Bheem Singh
sumber
ini lebih baik untuk pohon hierarki file yang tidak datar.
chris_r
-1

bagi saya "Saya" adalah modal dalam "Gambar". yang juga tidak disukai angular-cli. jadi juga peka huruf besar / kecil.

Pencipta Anonim
sumber
-1

Itu selalu tergantung di mana file html Anda yang merujuk ke jalur sumber daya statis (dalam hal ini gambar).

Contoh A:

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

Seperti yang Anda lihat, halamananda.html berjarak satu folder dari root (folder src), karena alasan ini diperlukan satu jumlah ../ untuk kembali ke root maka Anda dapat berjalan ke gambar dari root:

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

Contoh B:

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

Di sini Anda harus pergi ke pohon dengan 2 folder:

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