HTTP Error 404.0 - Not Found

您要找的资源已被删除、已更名或暂时不可用。

2026-09-15_13-30-44

 

在左边是图片列表，即是用户上传时临时存储的数据。每行中有一个“View”按钮，点击时，可以查看到图片。
在右边，却出现HTTP Error 404.0 - Not Found。是因为点击了图片不存在的记录。


html markup如下：
2026-09-15_13-44-10

 

下面是本随笔的重点，
判断文件是否存，在iframe显示自定义的内容。
可以使用下面方法：
2026-09-15_13-51-33

 

 const checkFileExists = async (url) => {
     try {
         const res = await fetch(url, {
             method: 'HEAD',       
             cache: 'no-store',     
         })
         return res.ok           
     } catch (err) {
         return false
     }
 };
View Code



#181行，只取响应头，不下载内容。
#182行，避免浏览器缓存导致误判。
#184行，200 ~ 299 视为存在。


Vue3环境下，调用上面的方法。
2026-09-15_14-09-10

 

上面else处理，只是注释。
把显示在iframe内。
2026-09-15_14-33-17

 

iframe.srcdoc = `
<!DOCTYPE html>
<html>
<body style="display:flex;align-items:center;justify-content:center;height:100%;margin:0;font-family:sans-serif;color:#999;">
    ${msg}
</body>
</html>`;
View Code

 

有一点注意的，内嵌框架的.src 与.srcdoc。

开篇时，出现的错误，成如今显示如下：
2026-09-15_14-36-15

 

在vue中检查文件是否存在。
在iframe中，处理HTTP Error 404.0 - Not Found显示自定义内容。


posted @ 2026-09-15 14:49  Insus.NET  阅读(4)  评论(0)    收藏  举报