外链图片必须用带协议的完整url（如https://cdn.example.com/photo.webp），https页面禁用http资源，alt属性强制要求且需具体描述，canvas操作需服务端配置cors。
必须用完整 URL，且协议要和页面一致；否则图片不显示、控制台报错、Canvas 读取失败都是常见后果。
src 必须是带协议的完整 URL
浏览器不会自动补 https://，写 src="example.com/photo.jpg" 或 src="//example.com/photo.jpg" 都会当相对路径或协议相对链接处理，大概率 404。本地双击 HTML 文件时，// 还会变成 file:// 协议，直接失效。
- ✅ 正确：
src="https://cdn.example.com/photo.webp" - ❌ 错误：
src="photo.jpg"（本地路径写法） - ❌ 错误：
src="//cdn.example.com/photo.jpg"（file:// 页面下崩）
HTTPS 页面里不能用 HTTP 图片
现代浏览器默认拦截混合内容（Mixed Content），https:// 页面加载 http:// 图片时，控制台会报 Blocked loading mixed active content，图片留白不渲染。
- 优先把图床 URL 改成
https://；不确定是否支持？先在浏览器地址栏手动访问该图片 URL 看能否打开 - 老旧图床只提供 HTTP？没法前端绕过，只能换源，或走自己后端代理中转
- 别依赖“以前能用”，2026 年主流浏览器已彻底禁用非安全上下文中的 HTTP 资源加载
alt 属性不是可选，而是强制可访问性要求
没写 alt，屏幕阅读器读不出内容，搜索引擎无法理解图意，WCAG 合规检查直接标红。空字符串 alt="" 是合法的，但仅适用于纯装饰图（如分隔线、背景点缀）。
- 描述性文字要具体：
alt="穿蓝衬衫的开发者正在调试 React 组件" - 避免无意义词：
alt="图片"、alt="cat.jpg"、alt="点击查看" - 如果图片是关键信息（比如流程图、数据截图），
alt写不清就等于丢内容
想用 Canvas 处理外链图片？CORS 不配好就白搭
普通 <img> 显示不受跨域限制，但一旦调 canvas.getContext('2d').drawImage() 再执行 canvas.toDataURL() 或读像素，就会触发 Unable to get image data from canvas because the canvas has been tainted 错误。
- 服务端需返回
Access-Control-Allow-Origin: *（或指定域名） - 前端加
crossorigin="anonymous"属性，但注意：如果服务端没配 CORS，图片直接加载失败（Network 面板状态为 0） - CN/国内图床极少默认开 CORS；CDN 若明确文档写了“支持 CORS”，才放心加这个属性
- 否则，别碰 Canvas 操作——改用服务端缩略图、裁剪或水印
外链图片最不可控的从来不是语法，而是那个 URL 明天还在不在、有没有突然加 Referer 限制、图床会不会跑路。关键内容图片，别全押在外链上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
