使用data-ng-src显示base64图像

Question

我想在AngularJS中选择文件后预览图像

它的HTML我用来选择文件和显示它与ng repeat

 <input type="file" file-input="files" multiple />
 <li ng-repeat="file in files">[[file.name]] <img data-ng-src="[[todata(file)]]"></li>

和我的angular代码

app.directive('fileInput', ['$parse', function($parse){
               return {
                   restrict:'A',
                   link:function(scope,elm,attrs){
                       elm.bind('change', function(){

                           $parse(attrs.fileInput)
                           .assign(scope,elm[0].files)
                           scope.$apply()
                       })
                   }
               }
           }])
.controller('fileUploader', ['$scope', '$http', 
                      function ($scope, $http) {
                          $scope.todata = function(file) {
                             var oFReader = new FileReader();
                           oFReader.readAsDataURL(file);
                           oFReader.onload = function(oFREvent) {
                               return oFREvent.target.result
                           }; 
                          }
                }]);

显示图像名称而不是图像本身，todata函数在控制台日志中是base64转换的图像，但在HTML中它什么也不显示。

如何显示图像预览?

编辑

console.log(oFREvent.target.result);工作良好，但它是唯一一个工作

Answer 1

您的data-ng-src应该以"data:image/png;base64,iVBORw0..."为前缀