2015-10-13 47 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}}" />