Làm thế nào để tải hình ảnh (và các nội dung khác) trong Angular một dự án?

Tôi khá mới với Angular nên tôi không chắc cách thực hành tốt nhất để làm điều này.

Tôi đã sử dụng angle-cli và ng new some-projectđể tạo một ứng dụng mới.

Trong đó đã tạo một thư mục "hình ảnh" trong thư mục "tài sản", vì vậy bây giờ thư mục hình ảnh của tôi là src/assets/images

Trong app.component.html(là thư mục gốc của ứng dụng của tôi), tôi đặt

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

Khi tôi ng servexem ứng dụng web của mình, hình ảnh không hiển thị.

Cách tốt nhất để tải hình ảnh trong ứng dụng Angular là gì?

CHỈNH SỬA: Xem câu trả lời bên dưới. Tên hình ảnh thực tế của tôi đã sử dụng dấu cách, mà Angular không thích. Khi tôi loại bỏ khoảng trắng trong tên tệp, hình ảnh hiển thị chính xác.

Tôi sửa nó rồi. Tên tệp hình ảnh thực tế của tôi có khoảng trắng trong đó, và vì lý do gì mà Angular không thích điều đó. Khi tôi xóa khoảng trắng khỏi tên tệp của mình, assets/images/myimage.pngđã hoạt động.

Trong dự án của tôi, tôi đang sử dụng cú pháp sau trong app.component.html của tôi:

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

hoặc là

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

sử dụng [src] làm biểu thức mẫu khi bạn đang ràng buộc một thuộc tính bằng phép nội suy:

<img [src]="imagePath" />

giống như:

<img src={{imagePath}} />

Nguồn: làm thế nào để ràng buộc img src trong angle 2 trong ngFor?

Angular-cli bao gồm thư mục nội dung trong các tùy chọn xây dựng theo mặc định. Tôi gặp sự cố này khi tên hình ảnh của tôi có dấu cách hoặc dấu gạch ngang. Ví dụ :

• 'my-image-name.png' phải là 'myImageName.png'
• 'my image name.png' phải là 'myImageName.png'

Nếu bạn đặt hình ảnh trong thư mục nội dung / img, thì dòng mã này sẽ hoạt động trong các mẫu của bạn:

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

Nếu sự cố vẫn tiếp diễn, chỉ cần kiểm tra xem tệp cấu hình Angular-cli của bạn và đảm bảo rằng thư mục nội dung của bạn được thêm vào các tùy chọn xây dựng.

Dành riêng cho Angular2 đến 5, chúng ta có thể ràng buộc đường dẫn hình ảnh bằng cách sử dụng thuộc tính ràng buộc như bên dưới. Đường dẫn hình ảnh được bao bởi dấu ngoặc kép.

Ví dụ mẫu

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

Thông thường "ứng dụng" là gốc ứng dụng của bạn - bạn đã thử app/path/to/assets/img.pngchưa?

1. Thêm dòng này ở trên cùng trong thành phần.

declare var require: any

2. thêm dòng này trong lớp thành phần của bạn.

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

3. thêm 'imgname' này trong thẻ img src trên trang html.

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

đối với tôi "Tôi" là vốn trong "Hình ảnh". mà cũng có góc-cli không thích. vì vậy nó cũng phân biệt chữ hoa chữ thường.

Nó luôn phụ thuộc vào đâu là tệp html của bạn tham chiếu đến đường dẫn của tài nguyên tĩnh (trong trường hợp này là hình ảnh).

Ví dụ A:

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

Như bạn có thể thấy, yourpage.html cách thư mục gốc (thư mục src) một thư mục, vì lý do này, nó cần một lượng ../ để quay lại thư mục gốc sau đó bạn có thể đi đến hình ảnh từ thư mục gốc:

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

Ví dụ B:

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

Ở đây bạn phải đi u trong cây bằng 2 thư mục:

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