[已解决]怎么让img元素的404error不在控制台里出现

Darth_EF

如题 我做了类似个文件查找的东西，查某个音乐文件的根目录下面有没有cover.jpg或cover.png。
由于不知道图片文件的后缀名究竟是哪个所以总会有个404的错误出现，控制台里一片都是红的。
不想用清屏指令，怕把需要的东西清了。
请问该怎么让图片的404错误不在控制台出现呢?

最佳答案

月排行榜 / 总排行榜

不二如是

4 天前

关键是别直接把 <img> 指到一个可能不存在的地址。浏览器对 <img> 的 404 会直接在控制台打红字；

但如果你先用 fetch() 探测，404 只是一个“正常的失败”，不会红。

探测到存在后再把 img.src 设过去，就不会有 404 噪音了。

1. async function pickExisting(urls) {
   
2.   // 并发探测：谁先返回 OK 就用谁
   
3.   const ctrls = [];
   
4.   const probes = urls.map(url => new Promise(async (resolve, reject) => {
   
5.     const ctrl = new AbortController();
   
6.     ctrls.push(ctrl);
   
7.     try {
   
8.       // 先 HEAD，部分静态服务器不支持 HEAD 就会 405
   
9.       let res = await fetch(url, { method: 'HEAD', cache: 'no-store', signal: ctrl.signal });
   
10.       if (!res.ok && (res.status === 405 || res.status === 501)) {
    
11.         // 回退到 GET（仍然不会在控制台打红字）
    
12.         res = await fetch(url, { method: 'GET', cache: 'no-store', signal: ctrl.signal });
    
13.       }
    
14.       if (res.ok) {
    
15.         // 找到后，取消其他请求
    
16.         ctrls.forEach(c => { if (c !== ctrl) c.abort(); });
    
17.         resolve(url);
    
18.       } else {
    
19.         reject(new Error(`${url} -> ${res.status}`));
    
20.       }
    
21.     } catch (e) {
    
22.       reject(e);
    
23.     }
    
24.   }));
    
25. 
    
26.   // 谁先成功用谁；都失败就抛
    
27.   return Promise.any(probes);
    
28. }
    
29. 
    
30. async function setCoverImage(imgEl, baseDir) {
    
31.   const candidates = [
    
32.     `${baseDir}/cover.jpg`,
    
33.     `${baseDir}/cover.jpeg`,
    
34.     `${baseDir}/cover.png`,
    
35.     `${baseDir}/cover.webp`
    
36.   ];
    
37.   try {
    
38.     const okUrl = await pickExisting(candidates);
    
39.     imgEl.src = okUrl;                  // 只在确认存在后再赋值，不会触发 404 日志
    
40.   } catch {
    
41.     imgEl.src = '/images/placeholder.svg'; // 可选：兜底图
    
42.   }
    
43. }
    
44. 
    
45. // 用法
    
46. const img = document.querySelector('#album-cover');
    
47. setCoverImage(img, '/music/abc'); // 这里的 baseDir 改成你的根目录
    

复制代码

跳转到最佳答案楼层

wp231957

控制台的错误信息你还能控制？？

kogawananari

筛选掉就好了

不二如是

关键是别直接把 <img> 指到一个可能不存在的地址。浏览器对 <img> 的 404 会直接在控制台打红字；

但如果你先用 fetch() 探测，404 只是一个“正常的失败”，不会红。

探测到存在后再把 img.src 设过去，就不会有 404 噪音了。

1. async function pickExisting(urls) {
   
2.   // 并发探测：谁先返回 OK 就用谁
   
3.   const ctrls = [];
   
4.   const probes = urls.map(url => new Promise(async (resolve, reject) => {
   
5.     const ctrl = new AbortController();
   
6.     ctrls.push(ctrl);
   
7.     try {
   
8.       // 先 HEAD，部分静态服务器不支持 HEAD 就会 405
   
9.       let res = await fetch(url, { method: 'HEAD', cache: 'no-store', signal: ctrl.signal });
   
10.       if (!res.ok && (res.status === 405 || res.status === 501)) {
    
11.         // 回退到 GET（仍然不会在控制台打红字）
    
12.         res = await fetch(url, { method: 'GET', cache: 'no-store', signal: ctrl.signal });
    
13.       }
    
14.       if (res.ok) {
    
15.         // 找到后，取消其他请求
    
16.         ctrls.forEach(c => { if (c !== ctrl) c.abort(); });
    
17.         resolve(url);
    
18.       } else {
    
19.         reject(new Error(`${url} -> ${res.status}`));
    
20.       }
    
21.     } catch (e) {
    
22.       reject(e);
    
23.     }
    
24.   }));
    
25. 
    
26.   // 谁先成功用谁；都失败就抛
    
27.   return Promise.any(probes);
    
28. }
    
29. 
    
30. async function setCoverImage(imgEl, baseDir) {
    
31.   const candidates = [
    
32.     `${baseDir}/cover.jpg`,
    
33.     `${baseDir}/cover.jpeg`,
    
34.     `${baseDir}/cover.png`,
    
35.     `${baseDir}/cover.webp`
    
36.   ];
    
37.   try {
    
38.     const okUrl = await pickExisting(candidates);
    
39.     imgEl.src = okUrl;                  // 只在确认存在后再赋值，不会触发 404 日志
    
40.   } catch {
    
41.     imgEl.src = '/images/placeholder.svg'; // 可选：兜底图
    
42.   }
    
43. }
    
44. 
    
45. // 用法
    
46. const img = document.querySelector('#album-cover');
    
47. setCoverImage(img, '/music/abc'); // 这里的 baseDir 改成你的根目录
    

复制代码