css隐藏无图像图标

Question

img.profile-picture{
        width:80px;
        min-height: 80px;
        float: left;
        background-image: url("/images/user-4.png");
    }

上面的CSS将个人资料照片图片的背景设置为一个不错的占位符，用于当用户没有上传自己的个人资料图片时。

图片标记的位置如下：

<img class="pull-left profile-picture" ng-src="{{profilePicturePath}}"/>

问题是，当设定路径上没有图像时，我会得到丢失的图像图标：

如果用户在加载页面之前是否有个人资料图片，则每次查询都是最重要的，并且为每个用户创建占位符图像是浪费服务器硬盘空间。

是否可以隐藏无图像图标？

Answer 1

将onerror属性添加到img代码

<img src="brokenimage.jpg" onerror="this.style.display='none'">

要维护无配置文件图片，我会用div包装图片，其背景设置为no-profile.jpg pic

Answer 2

你可以尝试：

<img ng-if="profilePicturePath" class="pull-left profile-picture" ng-src="{{profilePicturePath}}"/>
<img ng-if="!profilePicturePath" class="pull-left profile-picture">