在 404 代码上隐藏图像，仍然显示损坏的图像几毫秒

【问题标题】：Hide image on 404 code, still shows broken image for few ms在 404 代码上隐藏图像，仍然显示损坏的图像几毫秒
【发布时间】：2017-04-17 08:53:14
【问题描述】：

这是我的代码：

<img ng-show="json.user.picture" ng-src="{{json.user.picture}}" ng-error="json.user.picture = false">

当您无权使用来自外部网站的图片时，您会收到 404 代码，而当这种情况发生时，我不想显示该图片。我正在使用上面的代码执行此操作，它可以工作，但它仍然会在几毫秒内显示损坏的图像，您如何才能摆脱它？

在 ng-show 和 ng-hide 之间有一个小的延迟显示损坏的图像，如何摆脱它？

【问题讨论】：

How to hide alt text using CSS when the image is not present?的可能重复
您确定ng-show 完全有效吗？你是如何获取图像的？图片的 URL 是在 promise 调用中获取的吗？隐藏很可能永远不会起作用，而您提到的延迟只是图像被获取（损坏或其他）
这不是重复我不是想摆脱文本而是损坏的图像本身。是的，ng-show 有效，隐藏也有效，只是两者之间有一个小的延迟，显示我想摆脱的破碎图像

标签： javascript html css angularjs src

【解决方案1】：

我认为问题是；您使用json.user.picture 作为显示图像的条件以及图像的来源。因此，如果ng-error 触发，它会将json.user.picture 更改为false，因此图像源变为false，它会尝试加载名称为false 的图像，例如<img src='false'>，这将再次引发错误。

所以你必须使用一个额外的变量，比如showImage，默认情况下是true。出错时将其更改为 false 并在 ng-show 中使用它

所以它会像

<img ng-show="showImage" ng-src="{{json.user.picture}}" ng-error="showImage = false">

【讨论】：