渲染图像的变化

Question

有没有办法让我渲染我在angularjs中选择的图像... 比如你如何在stackoverflow中上传图片...当你选择一张图片时，图片会先呈现，然后才能上传......

我真的很新，所以忍受我......

控制器

$scope.uploadFile = function(parameter){
    console.log(parameter[0]);
    $scope.profilePic = parameter[0];
};

HTML

<div class="row">
    <div class="col-md-12">
        <img src="{{profilePic}}" class="img-responsive img-thumbnail"/>
    </div>
</div>
<div class="row">
    <div class="col-md-12"> 
        <input type="file" name="image_path" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)"  />
    </div>
</div>

使用ng-change时也出现问题，它给我一个错误..匿名函数错误..

Answer 1

在

中使用ng-src代替src

<img ng-src="{{profilePic}}" class="img-responsive img-thumbnail"/>

ng-src将暂停图像源分配，直到图像可用

检查此plnk它是否按您希望的方式运行，希望有所帮助

我刚刚添加了readURL(input)函数，该函数使用FileReader并将上传的图像转换为可读格式

Answer 2

我没有看到你使用ng-change你正在使用<input type="file" name="image_path" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)" />。您可以尝试将onchange="angular.element(this).scope().uploadFile(this.files)"更改为ng-change="uploadFile(this.files)"