AngularJS - Hiển thị nội dung mảng byte dưới dạng hình ảnh

Question

Tôi đang tìm kiếm cơ sở dữ liệu của mình dưới dạng một mảng byte. Tôi muốn hiển thị nội dung này dưới dạng tệp bằng cách đánh dấu hình ảnh đánh dấu nhưng không hoạt động ở đây.

// Controller which get my image and put into $scope. 
function MyController($scope, $http, $location) { 

    var url = '/json/FindImage?id=1'; 
    $http.get(url).success(function(result) { 
     $scope.image = result.Image; 
    } 
} 

// HTML 
<!-- It doesn't work --> 
<img src="{{image}}" /> 
<!-- It doesn't work also --> 
<img ng-src="{{image}}" /> 

Bất kỳ ý tưởng nào? Cảm ơn tất cả các bạn!

Answer 1

Dùng ng-SRC theo định dạng sau

<img ng-src="data:image/JPEG;base64,{{image}}"> 

Đừng quên thêm một bộ lọc thanh trùng cho data để không bị đánh dấu là unsafe bởi góc dữ liệu

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|ftp|blob):|data:image\//);

Answer 2

Thuộc tính src của img trỏ đến tệp nguồn của hình ảnh, nó không chứa dữ liệu nguồn thực tế. Bạn không thể làm những gì bạn muốn theo cách này; thay vào đó, bạn sẽ phải viết bộ giải mã hình ảnh bằng JavaScript (ví dụ: https://github.com/devongovett/png.js), kết quả đầu ra thành phần tử canvas.

Answer 3

Nếu bạn có thể yêu cầu máy chủ trả về hình ảnh trong chuỗi được mã hóa base64, bạn có thể sử dụng thuộc tính src là data url.