外部图片需按加载意图、访问控制、失效兜底三类逻辑分别管理；同源用相对路径，跨域用带协议绝对url；cors限制需加crossorigin属性并配服务端头；onerror回退须用本地或稳定cdn路径。
外部图片资源不是“加进去就能用”，而是要按加载意图、访问控制、失效兜底三类逻辑分别管理。 直接写 <img src="https://xxx.com/a.jpg?x-oss-process=image/resize,p_40"> 很容易在上线后突然不显示，问题往往不出在代码本身，而出在路径语义、跨域策略或服务器响应上。
怎么判断该用相对路径还是绝对URL
关键看图片是否和HTML同源部署。同源（同一域名、协议、端口）优先用相对路径：images/logo.png、../assets/icon.svg；跨域或CDN托管必须用带协议的绝对URL：https://cdn.example.com/photo.jpg。混用会导致本地测试正常、上线404——比如开发时用 ./img/banner.jpg，但构建后HTML被移到子目录，相对路径就断了。
为什么图片能显示却无法用JavaScript读取像素
这是典型的CORS限制，仅影响Canvas操作、图像压缩、尺寸探测等场景，不影响基础渲染。现象是控制台报 Blocked by CORS policy。解决方法只有两个：
• 给 <img> 加 crossorigin="anonymous" 属性；
• 确保图片服务器返回 Access-Control-Allow-Origin: * 或指定域名。注意：加了 crossorigin 但服务端没配CORS头，图片反而可能加载失败。
如何让外部图片挂了也不白屏
靠 onerror 回退是最轻量可靠的方案，但要注意触发条件和路径有效性：
• 它只在HTTP错误（404/403）、MIME类型不匹配或解析失败时触发，不响应超时或跨域拒绝；
• 备用图路径必须是当前站点可访问的相对路径或稳定CDN地址，比如 onerror="this.src='/images/placeholder.png'"；
• 不要写成 onerror="this.src='https://backup.com/fallback.jpg'" —— 这又引入一层外部依赖，失去兜底意义。
为什么 background-image 加了 external URL 却不加载
因为CSS背景图的加载时机晚于HTML解析，且受元素可见性影响。如果容器有 display: none、visibility: hidden 或在折叠的 <details></details> 里，浏览器根本不会发起请求。而 <img> 标签只要出现在HTML中，解析到就会立即触发加载。所以：装饰性图片用CSS背景，内容性图片必须用 <img>；需要预加载或确保加载的，别依赖 background-image。
真正难的不是写对一个src，而是预判它在哪种网络、哪种缓存策略、哪种服务器配置下会失效。外部图片一旦引入，你就失去了对它的生命周期控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
