$从JPG http.get到的img

问题描述：

我试图加载一个图像与$ 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"/>

所以，任何人对如何解决这一问题

你不能只将网址分配给ng-src？ – Malk

没有，因为这是一个模拟，它会稍后成为一个获取到服务器和图像不是静态 –

可能重复[如何从$ http.get在AngularJS中返回图像]（http://stackoverflow.com/questions/ 29780147/how-to-return-image-from-http-get-in-angularjs） – Jorg

答

我终于想通了，什么是它的想法。

我调用$ 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}}" />

$从JPG http.get到的img

相关推荐