我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
我如何隐藏破碎的图像图标? 例子:
我有一个图像与错误src:
<img src="Error.src"/>
该解决方案必须适用于所有浏览器。
当前回答
Angular隐藏破碎图像的方式。
Html文件内部
<img *ngIf="showImage" [src]="url" (error)="showImage = false">
内部Ts文件
public showImage = true;
其他回答
在https://bitsofco.de/styling-broken-images/找到了一个很好的解决方案
img { position: relative; } /* style this to fit your needs */ /* and remove [alt] to apply to all images*/ img[alt]:after { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; font-family: 'Helvetica'; font-weight: 300; line-height: 2; text-align: center; content: attr(alt); } <img src="error"> <br> <img src="broken" alt="A broken image"> <br> <img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">
在理论:
严格的“css only”,我们没有干净的选择。看到其他答案,我没什么可补充的。
在实践中:
我认为在错误事件上添加一个类是最好的方法。这就是我的意思-有答案几乎是这样的,原则是一样的,只是如果你不直接添加样式声明会更优雅。相反,添加一个以后可以针对的类:
<img src="..." onerror="this.classList.add('notfound')">
现在你可以使用img对它进行样式化。没有找到作为选择器。你可以养成一个习惯,把这个小片段添加到你所有的图像中;在你做好造型之前不会有任何伤害。
旁注,在有人评论“这不是一个css唯一的解决方案”之前:是的,谢谢你,队长,确实不是。我试图帮助解决问题本身,一个很多人可能会遇到的问题,而不仅仅是看确切的措辞。
一种不需要任何代码的基本且非常简单的方法是只提供一个空的alt语句。然后浏览器将返回空白图像。它看起来就像没有图像一样。
例子:
<img class="img_gal" alt="" src="awesome.jpg">
试试看吧!;)
CSS/HTML没有办法知道图像是否断开链接,所以无论如何你都必须使用JavaScript
但这里有一个隐藏图像或用备份替换源的最小方法。
<img src="Error.src" onerror="this.style.display='none'"/>
or
<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>
更新
你可以一次将这个逻辑应用到多个图像上,如下所示:
文档。addEventListener("DOMContentLoaded",函数(事件){ document.querySelectorAll (img) .forEach(函数(img) { img。Onerror = function(){this.style.display='none';}; }) }); < img src = " error.src " > < img src = " error.src " > < img src = " error.src " > < img src = " error.src " >
更新2
关于CSS选项,请参阅下面michalzuber的回答。你不能隐藏整个图像,但是你可以改变破碎图标的外观。
其他人所描述的同样的想法在React中工作如下:
<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>