能显示外部图片必须满足url可访问、协议匹配、cors允许三条件；缺一则空白或破损，src须带完整协议（如https://），不可省略或仅用//，且cors缺失时无报错但不渲染。
能显示，但必须满足三个硬性条件：URL可访问、协议匹配、CORS允许。缺一不可，否则空白或破损图标。
外部图片 URL 必须带协议且可直连
浏览器会原样发起 HTTP/HTTPS 请求，src 值不能只是 example.com/image.jpg —— 缺少 http:// 或 https:// 会被当成相对路径处理，最终请求变成类似 https://your-site.com/example.com/image.jpg，必然 404。
- ✅ 正确写法：
src="https://cdn.example.com/photo.png"（推荐 HTTPS） - ❌ 错误写法：
src="cdn.example.com/photo.png"或src="//cdn.example.com/photo.png"（后者在 HTTP 页面中会降级为 HTTP，可能被现代浏览器拦截） - 用开发者工具的 Network 面板看实际请求地址，确认状态码是 200 而非 0 或 400
CORS 策略阻止时 img 不报错但不渲染
img 标签加载跨域资源时，浏览器不会抛 JS 错误，也不会触发 onerror（除非返回 4xx/5xx），但若响应头缺少 Access-Control-Allow-Origin，图片就只留空白——你什么都看不到，也收不到提示。
- 常见现象：本地开发时图片正常，上线后变空白；Chrome 控制台 Network 里该图片状态是 200，Preview 却为空
- 验证方式：右键图片 → “在新标签页打开图像”，如果新页能显示，说明是 CORS 问题；如果也打不开，才是源站本身不可访问
- 解决方向：让图片托管方配置 CORS 响应头，或改用代理（如 Nginx 反向代理该 CDN 域名到同域路径）
alt 属性不是可选项，而是加载失败时的唯一 fallback
当图片因网络、路径、CORS 或格式错误无法渲染时，alt 文本会作为替代内容显示在图片位置。它不是“辅助描述”，而是用户此刻能获得的全部信息。
- 空
alt=""会让屏幕阅读器跳过，对无障碍不友好；纯装饰图才适用 - 写具体描述，比如
alt="上海外滩夜景，黄浦江两岸灯光"，而非alt="图片1" - 别依赖
onerror回退到本地图：它不捕获 CORS 拒绝，且 fallback 图仍需满足同域或 CORS 允许
最常被忽略的是协议和 CORS 的隐式耦合——你以为 URL 写对了就万事大吉，其实浏览器早就在后台悄悄拒绝了响应。调试时先看 Network 里的真实请求和响应头，比反复改 src 更有效。
