src(unknown) 的问题 - Chrome 中的图像损坏答案

【问题标题】：An issue with src(unknown) - broken image in Chromesrc(unknown) 的问题 - Chrome 中的图像损坏
【发布时间】：2018-06-04 08:24:41
【问题描述】：

当我尝试显示图像时，我在 Chrome 中的行为非常奇怪。

我看到一些带有破坏性图像的小徽章：这只是残破的图片。

以前在 chrome 中不是这样工作的。

我使用一些 javascript 代码来处理未找到的图像：

//This script will be loaded in head section of the page
function fixBrokenImage(element) {
    element.onerror = '';
    element.src = '';
}

在 HTML 中：

<img src="~/Image?getById=@Model" onerror="fixBrokenImage(this)"/>

但是，它仅在我第一次在 Chrome 中执行 Clear Cache 和 Hard Refresh 时有效，并且在随后的正常刷新中无效

说起来很惭愧，但是在IE和Edge上都能用，感觉有点搞笑。

您知道我该如何在 Chrome 中修复它吗？我正在使用版本：版本 63.0.3239.108 (Official Build) (64-bit)

感谢您的任何建议

【问题讨论】：

为什么不干脆用this.style.display='none' 来隐藏损坏的图像？
请定义“它不起作用”。您期望结果是什么，结果又是什么。
@JeremyThille，我不使用 this.style.display='none' 因为有一些 css 样式会修改它并且在某些情况下不起作用
@Teemu，我希望设置 src='' 但它是 src（未知）。一般来说，我希望在这两种情况下都不会出现损坏的图像。该问题可能与最近的 Chrome 版本有关。
对损坏的图像源的处理在不同的浏览器中一直在变化，有时会显示损坏的图像，有时不会。空的alt 是隐藏损坏图像的最简单方法。您可以在错误处理程序中将alt 设置为空，如果您需要它（实际上将其排除在外将是无效的 HTML）。

【解决方案1】：

如果你使用的是php，那么esc_url($url)会解决它，esc_url函数解决问题或者只是在Js中使用URL.createObjectURL(url)

【讨论】：

【解决方案2】：

我设法通过向 html 元素添加空属性使其工作：

<img src="~/Image?getById=@Model" onerror="fixBrokenImage(this)" alt=""/>

感谢 @Teemu 的建议，最终使该代码在 Chrome 上运行

【讨论】：

【解决方案3】：

你可以像这样使用这个javascript代码，你忘了放alt属性：

function fixBrokenImage(element) {
    element.onerror = '';
    element.src = '';
    element.alt = 'image not found'
}

【讨论】：

另一种选择是： function fixBrokenImage(element) { element.onerror = ''; element.src = ''; element.style.display = 'none'; }
感谢@Alex，将空的 alt="" 添加到 html 元素完成了这项工作。干杯