正确插入网络图片需用完整URL（含https://协议），避免混合内容、缺失alt属性及CORS限制；外链图片存在失效风险，关键内容不宜依赖。
用 <img alt="HTML中如何插入网络图片_HTML插入网络图片链接写法【外链图片】" > 标签插入网络图片，src 必须是完整 URL
直接写 <img src="example.jpg" alt="HTML中如何插入网络图片_HTML插入网络图片链接写法【外链图片】" > 是本地路径写法，放网络图片会 404。必须带协议（https:// 或 http://）和完整域名。
- ✅ 正确：
<img src="https://example.com/photo.png" alt="HTML中如何插入网络图片_HTML插入网络图片链接写法【外链图片】" > - ❌ 错误：
<img src="photo.png" alt="HTML中如何插入网络图片_HTML插入网络图片链接写法【外链图片】" >（浏览器当相对路径找本地文件） - ❌ 错误：
<img src="//example.com/photo.png" alt="HTML中如何插入网络图片_HTML插入网络图片链接写法【外链图片】" >（协议相对链接，在 file:// 页面里会失效）
HTTP 和 HTTPS 混合加载会被浏览器阻止
如果网页本身是 https:// 开头，但 src 写了 http:// 地址，现代浏览器（Chrome/Firefox/Safari）默认屏蔽，控制台报 Mixed Content 错误，图片不显示。
- 检查浏览器开发者工具的 Console 面板，看到类似
Blocked loading mixed active content "http://..."就是这个原因 - 优先用
https://；不确定目标站是否支持 HTTPS 时，先手动在浏览器地址栏试访问该图片 URL - 某些老旧图床只提供 HTTP，此时只能换图床，或启用服务器代理中转（前端无法绕过）
alt 不是可选项，而是可访问性刚需
没写 alt 属性，屏幕阅读器读不出图片内容，搜索引擎也无法理解图意，还可能被 WCAG 合规检查标为问题。
- 空字符串
alt=""表示“纯装饰图”，适合背景类、分隔线类图片 - 描述性文字如
alt="一只橘猫蹲在窗台上晒太阳"，不是“图片”“照片”这种无信息词 - 避免
alt="cat.jpg"或alt="点击查看详情"—— 前者是文件名，后者是操作提示，都不是图片内容本身
CORS 限制导致图片能访问但无法用 Canvas 处理
普通 <img alt="HTML中如何插入网络图片_HTML插入网络图片链接写法【外链图片】" > 显示不受跨域限制，但一旦你用 JavaScript 把它画到 <canvas></canvas> 上，再调 canvas.toDataURL() 或读像素，就会触发 CORS 错误：Unable to get image data from canvas because the canvas has been tainted。
立即学习“前端免费学习笔记（深入）”；
- 解决方法只有两个：目标图床开启
Access-Control-Allow-Origin: *，或你在<img alt="HTML中如何插入网络图片_HTML插入网络图片链接写法【外链图片】" >标签加crossorigin="anonymous" - 加了
crossorigin但服务端没配 CORS？图片直接加载失败（注意看 Network 面板的 0 status） - CDN 或图床明确写了“支持 CORS”，才放心加这个属性；否则宁可不用 Canvas 操作，改用服务端处理
