javascript - 没有图像时隐藏缩略图 div

Question

我想在没有图像时隐藏一个 div class="thumbnail"，因为如果没有，它看起来是这样的:Image

我的html代码:

<div class="thumbnail" >
    <img id="bild" src="#" /></div>
    <span class="btn btn-default btn-file">
    Browse <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files); angular.element(this).scope().readURL(this.files);"/>
</span>

和 js:

$scope.readURL = function(files) { //This' to show the image
    if (files && files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#bild').attr('src', e.target.result);
        };
        reader.readAsDataURL(files[0]);
    }
};

如您所见，readURL() 显示图像，然后就可以了，但之前看起来不太好。我正在使用 AngularJS。

Answer 1

第一，删除属性src="#"在你的<img />标签。

<img id="bild" />

二、添加属性src给你的<img />每当您需要时(并非总是如此)。

<script>
$('#bild').prop('src', e.target.result)
</script>

第三种，使用.prop()而不是 .attr() (jQuery 版本 >= 1.6)