请求实现网络不佳时网页显示旧图片替代破损图片功能

第一步：修复PHP代码的核心问题 #

当前PHP代码会在所有请求场景下先输出状态码，这会直接破坏图片的二进制内容，是导致图片破损的关键原因之一。同时补充超时控制和图片解析校验，确保只有有效图片才会被输出：

<?php
$username='****';
$password='****';
$URL='http://******/ISAPI/Streaming/channels/1/picture';    // 301 - camera 3, stream 1

$ch = curl_init();
// 设置10秒超时，避免请求长时间阻塞
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
curl_setopt($ch, CURLOPT_URL, $URL);
// 让curl返回结果而非直接输出
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
$status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

if ($status_code == 200) {
    header('Content-Type: image/jpeg');
    $img = imagecreatefromstring($result);
    if ($img !== false) {
        imagejpeg($img);
        imagedestroy($img);
    } else {
        // 图片解析失败时返回404状态
        http_response_code(404);
        echo '图片解析失败';
    }
} else {
    // 请求失败时返回对应HTTP状态码
    http_response_code($status_code);
    echo '请求摄像头图片失败，状态码：' . $status_code;
}
?>

修改说明：

• 移除全局的echo $status_code，避免破坏图片二进制内容
• 增加CURLOPT_RETURNTRANSFER选项，控制curl结果返回方式
• 添加超时时间，防止请求卡住
• 新增图片解析有效性校验，解析失败时返回明确错误状态

第二步：修改前端逻辑，保存并复用成功加载的图片 #

通过前端预加载机制，验证新图片的有效性，仅在加载成功时替换显示内容，失败则恢复上一张正常图片：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <a>
        <img src="kivisilla1camera.php" 
             alt="kivisilla1"
             id="kivisilla1-img"/>
    </a>
</body>
<script>
// 存储上一张成功加载的图片地址
let lastValidImageUrl = document.getElementById('kivisilla1-img').src;

function updateImage() {
    const image = document.getElementById('kivisilla1-img');
    const newUrl = "kivisilla1camera.php?r=" + Math.random();
    // 创建临时图片对象预加载，避免直接替换导致破损图显示
    const tempImg = new Image();

    tempImg.onload = function() {
        // 加载成功，更新显示内容和缓存地址
        image.src = newUrl;
        lastValidImageUrl = newUrl;
    };

    tempImg.onerror = function() {
        // 加载失败，恢复为上一张有效图片
        image.src = lastValidImageUrl;
    };

    // 发起新图片请求
    tempImg.src = newUrl;

    setTimeout(updateImage, 4000);
}

updateImage();
</script>
<style type="text/css">
body {
    background-color: #77776D;
}
img {
    max-width: 100%;
    height: auto;
    width: auto;
}
</style>
</html>

修改说明：

• 新增lastValidImageUrl变量，持久化存储有效图片地址
• 使用临时Image对象预加载新图片，避免直接替换原图片导致破损图闪现
• 加载成功时更新显示和缓存地址，失败时恢复上一张有效内容
• 保留原定时更新逻辑，持续尝试获取最新图片

核心逻辑说明 #

1. PHP端确保仅输出完整有效的图片内容，请求或解析失败时返回明确错误状态，杜绝损坏的图片数据流入前端
2. 前端通过预加载校验机制，保证页面始终展示有效图片，仅在新图片验证通过后才替换显示，彻底解决加载失败时的破损图问题

内容的提问来源于stack exchange，提问作者Silver Pauk