Image Nhận yêu cầu với AngularJS

Question

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

Dưới đây là HTML:

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

góc điều khiển:

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

Và lỗi tôi nhận được (%7D%7D tươ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 hình ảnh khi bộ điều khiển góc đã được khởi tạo?

Answer 1

Hãy thử thay thế src của bạn với ng-src để biết thêm thấy the documentation:

Sử dụng đánh dấu góc như {{}} băm trong một thuộc tính src không hoạt động phải: Trình duyệt sẽ lấy từ URL có văn bản theo nghĩa đen {{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> 

Answer 2

Nếu ai đó đang tìm kiếm các giải pháp để tạo kiểu tóc background-image sau đó sử dụng này:

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