在呈现img html组件时重定向或显示错误消息

Redirect or show an error message on error when rendering img html component

本文关键字：重定向 显示 错误 消息 组件 img html      更新时间：2023-09-26

我从自制服务器的请求中返回一个简单的html页面

<html>
  <head>
    <title>Server Sample</title>
  </head>
  <img src="/stream.jpeg">
</html>

要在页面中的img中渲染图像，将在路径/stream.peg下向服务器发出第二个请求，以获取实际的图像数据。但是，如果这个请求由于某些原因而失败，我希望以某种方式向用户显示一个错误页面或一条消息。根据失败请求的上下文重定向或生成html错误页面似乎不起作用，可能是因为初始页面需要一个图像。在这种情况下，页面显示"一个空的"img标记，而不是所需的错误。

解决这个问题最方便的方法是什么？如果可能的话，我更喜欢使用html解决方案，但也允许使用javascript。

请注意，我编写的服务器非常非常简单，可以动态生成非常简单的页面，它不是复杂服务器可以提供的那种扩展。

试试这个：

<img src="stream.jpeg" onerror="errorFunction();">

但是onerror属性包含在HTML5中。因此，在旧的HTML中，这将失败。

JavaScript:

function errorFunction() {
  // Here you implement what's happening if the image failed to load.
  // For example:
  window.location.assign('http://my-site/error-page.html');
  // or
  console.log('Sorry, but image cannot be loaded right now.');
}

此函数必须在<img>标记之前定义。否则，如果在定义函数之前未能加载图像，HTML将找不到此函数，并且您将得到一个引用错误。

相关文章：