在javascript中从服务器接收文本和图片答案

【问题标题】：Receive text and picture from server in javascript在javascript中从服务器接收文本和图片
【发布时间】：2014-07-06 03:02:12
【问题描述】：

我需要每秒刷新一个 img 标签。所以我写了一点代码来改变img标签的src属性，并从image.php加载图片。都好。有时image.php没有图片，或者image.php出错了。我需要 image.php 与图片一起发送消息以确定图片的有效性，或者告诉我错误号。所以我需要一个 php 代码，将文本和图片放入它的输出中。

我现在用

//code
header('Content-Type: image/jpeg');
imagejpeg($im);
imagedestroy($im);

并且 image.php 就像一个 .jpg 文件，我可以在 img 标签的 src 属性中使用它。但我需要一种方法来确定 image.php 是否输出有效图像而不是 php 错误。

js代码：

var newImage = new Image();
var count = 0;
function updateImage()
{

    if(newImage.complete) {
    document.getElementById("myimg").src = newImage.src;
    newImage = new Image();
    newImage.src = "socket.php?message=0&image" + count++ + ".jpg";
    }

}

【问题讨论】：

什么是“图片无效”？
“图片无效”表示 image.php 失败并且它创建的图像不是真实图像。我在 src 属性中使用此图像，因此如果 image.php 的输出不是图像而是错误，则 img 标记将尝试将该消息显示为图像，这将失败并且 img 标记将不显示任何内容。
“检测是否为图像”是人工智能研究的主题。例如，如果您遇到服务器错误（404、500 等），您可以处理。显示你的 java 脚本。
将其添加到问题中。

标签： javascript php html

【解决方案1】：

第一种方法：

使用img 元素的onerror 属性：

<img src="image.gif" onerror="alert('The image could not be loaded.')">

Source

您可以将函数用作onerror 属性的值，并在java 脚本中使用此函数。示例如下。

HTML：

<img src="image.gif" onerror="handleError();">

JS：

function handleError() {
    // do something
}

另一种方法是将onerror 处理程序设置为 Image 类的实例：

var image = new Image();
img.src = /* url to the imgage */;
image.onload = function() {
    // assign img.src to to src property of the `img` element
}
image.onerror = function() {
    // do actions on error
}

注意：
第二种方式是正确使用new Image()的方式。

【讨论】：

【解决方案2】：

JavaScript 方面，您可以通过 error 事件 (jsfiddle) 了解图片加载失败的情况。

也许，如果图像加载失败，您可以通过 Ajax 请求相同的 URL，以获取错误消息。当然，除非您也想将错误消息编码为图像（并在客户端对其进行解码），否则这可能是一个好主意，也可能不是一个好主意。

【讨论】：

【解决方案3】：

我会使用 Ajax 来完成这样的任务，并从服务器发回图像路径和任何其他添加的信息。

客户端可以轻松读取 Ajax 响应。

【讨论】：

我不想将图像保存在服务器上。 image.php 就像一个图像。所以没有“图像路径”，只有图像或消息错误。
@user3604987 你要求做某事而不是帮助你。展示您的所作所为，我们将为您提供帮助。