2015-10-13 46 views
0

我試圖加載一個圖像與$ http.get因爲它以後會從服務器來了,我真的不知道該怎麼做:/

代碼現在我已經是:

在服務

我得到這樣的:

return $http.get('resources/mock-data/image.jpg', { 
     headers: { 
     'Content-Type': 'image/jpg' 
     } 
    }); 

返回我promisse,附帶這樣的二進制數據: JFIF(% !1!%),... 383,7( - 。+

,$ & ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,, K!1AQ「aq 2 BRr #3b $4S Ccst 5D <!1AQ 「aq 2 3Br #$4b C R ? Ԑ- o> vJ4 > aW s̯ I & ϻ sl Z . 6- r R hK; ֮ T! k R [ Muw EKO 中c p(LJ nUjul5mv>}ԙҺʵڸXC] + Ո ($( ( s{ g y 0 w' #^d i kI> 'WJpJQ ^}: c g#G^5N v< ҡ i fJ k ul 9 6zKe | Z W ) ' : j L qU x b9RVg5 (jI5A V \˚F\ 14G 9(HK9#H +1sȂ[email protected] { \ W)T]# m Ӕ U _ B= & a Θx l ]nΛfX_2y8 Q 4\ + O 0! 〜 t; K^ + 5 _H UQ v k &; RV OIX] 2ڟ乙 Ԑ% (@,E:5 & .P {RIRR:8 | 4 ػ H 0XW r 5 l g G p l Ǜ1 V 0 {' C ʴ # M 〜͟ i >I ÿ 0 -} < 5 V JT v f3 b; Vg3 [email protected] @! %/ lk S ᔂʘx 5 9 =p - ٽ m q E( K% )ż[w gѾ +% m l8^ Vn !@ қ

這只是它的一部分...它是12500控制器I得到這樣來解析爲base64上長度...

的:

var base64 = 'data:image/jpg;base64,' + btoa(unescape(encodeURIComponent(image.data))) 
    console.log(base64); 
    $scope.fullImage = base64; 

其中圖像是的響應promisse,數據是我上面提出的二進制文件的地方。

我認爲有以下幾點:

<img ng-src="{{fullImage}}" class="coolin_home_full_image"/> 

所以,任何人對如何解決這一問題

+0

你不能只將網址分配給ng-src? – Malk

+0

沒有,因爲這是一個模擬,它會稍後成爲一個獲取到服務器和圖像不是靜態 –

+1

可能重複[如何從$ http.get在AngularJS中返回圖像](http://stackoverflow.com/questions/ 29780147/how-to-return-image-from-http-get-in-angularjs) – Jorg

回答

1

我終於想通了,什麼是它的想法。

我調用$ HTTP GET沒有頭,所以它沒有返回我bufferArray而是一個字符串,我固定的:

var deferred = $q.defer(); 
    var promise = deferred.promise; 
    $http.get('resources/mock-data/image.jpg', {}, { 
     headers: { 
     'Content-Type': 'image/jpg' 
     }, 
     responseType: 'blob' 
    }).then(function(image) { 
     var blob = new Blob([image.data], { 
     type: 'image/jpeg' 
     }); 
     var fr = new FileReader(); 
     fr.onload = function() { 
     deferred.resolve(fr.result); 
     }; 
     fr.readAsDataURL(blob); 
    }, function(error) { 
     deferred.reject(error); 
    }); 

    return promise; 

,然後在控制你調用的只是迴歸承諾和拋出像img

<img ng-src="{{fullImage}}" />