Hình ảnh Nhận yêu cầu với AngularJS

Tôi đang lưu trữ chuỗi nguồn của một hình ảnh sẽ được hiển thị trong HTML trong bộ điều khiển AngularJS, tuy nhiên, nó tạo ra 404 trước khi bộ điều khiển Angular được khởi tạo.

Đây là HTML:

 <div ng-controller="Cont">
      <img src="{{imageSource}}">
 </div>

Bộ điều khiển góc:

 var Cont = function($scope) {
      $scope.imageSource = '/tests.png';
 }

Và lỗi tôi nhận được ( %7D%7Dtương ứng với {{trong mẫu).

 GET https://localhost:9000/%7B%7BimageSource%7D%7D 404 (Not Found) 

Làm cách nào để ngăn điều này xảy ra? Tức là chỉ tải ảnh khi Angular controller đã được khởi tạo?

Hãy thử thay thế src của bạn bằng ng-src để biết thêm thông tin, hãy xem tài liệu :

Sử dụng đánh dấu Angular như {{hash}} trong thuộc tính src không hoạt động đúng: Trình duyệt sẽ tìm nạp từ URL với văn bản chữ {{hash}} cho đến khi Angular thay thế biểu thức bên trong {{hash}}. Chỉ thị ngSrc giải quyết vấn đề này.

 <div ng-controller="Cont">
      <img ng-src="{{imageSource}}">
 </div>

Nếu ai đó đang tìm kiếm giải pháp để tạo kiểu ảnh nền thì hãy sử dụng cái này:

<div ng-style="{'background-image': 'url({{ image.source }})'}">...</div>