如果未找到图像源且未加载图像，则 Javascript 函数显示消息代替图像答案

【问题标题】：Java script function to display a message in place of image if image source is not found and image is not loaded如果未找到图像源且未加载图像，则 Javascript 函数显示消息代替图像
【发布时间】：2022-01-09 20:52:30
【问题描述】：

我正在做一个项目，我将从另一个来源获取 HTML 文件，并且它可以有多个图像，因此我无法修改 HTML 文件。我打算写一个java脚本来解决下面的问题。

但该文件有一些不存在的 img 源，因此无法加载图像。

如果未加载图像，我想显示“请登录以查看此图像”之类的特定消息，而不是未加载的图像，而如果加载了其他图像，则应按原样显示。

如果有人可以提供任何反馈，将会很有帮助。

【问题讨论】：

您可以添加一些代码吗？像以前很多次一样，这不是编码服务。
欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。请首先>>>Search for related topics on SO，如果您遇到困难，请发布您的尝试的minimal reproducible example，并使用[<>] 记录输入和预期输出sn-p 编辑器。

标签： javascript html image

【解决方案1】：

这是页面加载后的测试方法

window.addEventListener("load", event => {
  document.querySelectorAll('img').forEach(img => {
    const isLoaded = img.complete && img.naturalHeight !== 0;
    if (!isLoaded) img.outerHTML = "Please login in order to view this image"
  })
})

<img src="image1.jpg" /><br/>
<img src="image2.jpg" /><br/>
<img src="image3.jpg" /><br/>
<img src="image4.jpg" /><br/>
<img src="image5.jpg" /><br/>
<img src="image6.jpg" /><br/>

【讨论】：

正如我所说，我不能在 HTML 文件中添加任何内容，并且 img 标签是 HTML 文件的一部分。
@SimranGehani 查看更新

【解决方案2】：

如果我正确理解您的要求，您可以通过在 HTML 标记中使用 alt 来做到这一点。例如：

&lt;img src="computer.jpg" alt="Computer Image" width="500" height="600"&gt;

如果你运行那个sn-p，你可以看到由于图像没有定义，所以会出现文本。

【讨论】：

如果没有加载图像，我无法编辑 HTML 文件需要 javascript 或 jquery 函数来显示特定文本。
看看上面链接中提供的所有答案：stackoverflow.com/questions/9815762/…
我确实看过它，但他们中的大多数都描述了一个将 URL 作为参数传递的函数。但就我而言，我无法调用此函数，因为无法编辑 HTML 文件。