Javascript 我如何才能不加载链接断开的图像？

我正在开发一个功能，其中图像是从服务器渲染的。我正在整理图像，但发现有很多空白。这就是原因，因为加载的图像链接已断开

HTML:

<div class="image-result" *ngIf="Display('images')">
    <div class="col-sm-3" *ngFor="let item of items$|async">
      <a href="{{item.link}}">
          <figure>
             <img class="res-img" src="{{item.link}}" onerror="this.style.display='none'">
          </figure>       
      </a>
    </div>
</div>

我使用了

onerror=“this.style.display='none'”

来解决这个问题，但是在从服务器加载图像时留下了大量空白。是否有任何解决方案，比如在检测到带有断开链接的图像时移除img标签？在提出问题之前，我已经经历了堆栈溢出，但我无法解决这个问题。如果有人能帮我，那就太好了。谢谢！：）

您可以使用

onerror=“this.parentNode.removeChild（this）”

来删除图像标记，而不是使用

onerror=“this.style.display='none'”

来隐藏图像

---

如果要删除整个列，在特定情况下，可以执行以下操作

var colEl = this.parentNode.parentNode.parentNode;
colEl.parentNode.removeChild(colEl);

或者，在HTML中：

onerror="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode)"

您可能应该将其移动到某个JavaScript函数，并通过以下方式附加处理程序

element.addEventListener('error', function() { /* ... */ });

参考文献：

---

如果您不关心支持Internet Explorer，也可以使用而不是执行

parentNode.removeChild

欺骗。这对于减少

onerror

属性中的代码长度特别有用，您会选择使用它吗，但我不建议这样做。

您可以使用

onerror=“this.style.display='none'”

来隐藏图像，而不是

onerror=“this.parentNode.removeChild（this）”

完全删除图像标签

---

如果要删除整个列，在特定情况下，可以执行以下操作

var colEl = this.parentNode.parentNode.parentNode;
colEl.parentNode.removeChild(colEl);

或者，在HTML中：

onerror="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode)"

您可能应该将其移动到某个JavaScript函数，并通过以下方式附加处理程序

element.addEventListener('error', function() { /* ... */ });

参考文献：

---

---

如果您不关心支持Internet Explorer，也可以使用而不是执行

parentNode.removeChild

欺骗。这对于减少

onerror

属性中的代码长度特别有用，您会选择使用它吗，但我不建议这样做。

更具角度的方法是：

 <img src="{{item.link}}" (error)="item.brokenImage=true">

所以你会：

<div class="col-sm-3" *ngFor="let item of items$|async">
    <div *ngIf="!item.brokenImage">
        <a href="{{item.link}}">
            <figure>
                <img class="res-img" [src]="item.link" (error)="item.brokenImage=true">
            </figure>
        </a>
    </div>
</div>

---

您需要侦听image元素的错误事件，并根据图像是否成功加载指定一个布尔值。然后，根据该值，angular将使用div显示图像，或将其从DOM中删除。

更具角度的方法是：

 <img src="{{item.link}}" (error)="item.brokenImage=true">

所以你会：

<div class="col-sm-3" *ngFor="let item of items$|async">
    <div *ngIf="!item.brokenImage">
        <a href="{{item.link}}">
            <figure>
                <img class="res-img" [src]="item.link" (error)="item.brokenImage=true">
            </figure>
        </a>
    </div>
</div>

---

---

您需要侦听image元素的错误事件，并根据图像是否成功加载指定一个布尔值。然后，根据该值，angular将显示带有div的图像，或者将其从DOM中删除。

这里对删除部分进行了更好的解释。这就是我即将发布的答案：D。此处的删除文档（示例）是否仍会留下空白？如果使用

display:none

隐藏它不起作用，那么删除它也肯定不起作用？您认为您需要在link或div级别删除它，具体取决于styles@Pete否-隐藏元素会使其不可见-如果一个div被隐藏但具有“最小高度和宽度”属性，它将占用该空间。删除一个元素会将它从DOM中删除，这样它就不存在了——因此没有空间used@ThisGuyHasTwoThumbs以上只是删除图像，通过在图像上使用与删除图像相同的display none，它将不占用任何空间-如果div仍在使用

col-sm-3

渲染，则它仍将占用该空间导致空白的宽度。如果你用可见性而不是显示来隐藏它，那么也只有这样它才会占用空间-@Pete ah不，你是对的-这是在

display:none

被使用的时候，而实际代码中有空白是在它增加间距和填充时。这里对移除部分进行了更好的解释。这就是我即将发布的答案：D。此处的删除文档（示例）是否仍会留下空白？如果使用

display:none

隐藏它不起作用，那么删除它也肯定不起作用？您认为您需要在link或div级别删除它，具体取决于styles@Pete否-隐藏元素会使其不可见-如果一个div被隐藏但具有“最小高度和宽度”属性，它将占用该空间。删除一个元素会将它从DOM中删除，这样它就不存在了——因此没有空间used@ThisGuyHasTwoThumbs以上只是删除图像，通过在图像上使用与删除图像相同的display none，它将不占用任何空间-如果div仍在使用

col-sm-3

渲染，则它仍将占用该空间导致空白的宽度。如果使用可见性而不是显示来隐藏它，然后，也只有到那时，它仍然会占用空间-@Pete啊，不，你是对的-这是在

显示时使用的：无
，实际代码中有空格，是在它添加空格和填充时，你可以使用
*ngIf
有条件地从视图中添加或删除元素。@abhishekkannojia我不明白。我已经在父级
div
中使用了
*ngIf
，您可以使用
*ngIf
有条件地从视图中添加或删除元素。@abhishekkannojia我不明白。我已经在家长
div中使用了
*ngIf
，感谢您给我时间回答我的问题：我真的很感激你的帮助。如果你能为我提供完整的解决方案，那就太好了。我已使用您提供的上述解决方案更改了
img
标记行。但它似乎不起作用：/我已经编辑了我的帖子。试试看。如果不行，你能告诉我我