javascript - 更改时渲染图像

Question

有没有办法让我渲染我在 angularjs 中选择的图像... 就像您在 stackoverflow 中上传图片一样...当您选择图片时，图片将在您上传之前先渲染...

我对此真的很陌生，所以请耐心等待..

Controller

$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 并将上传的图像转换为其可读格式