图片不显示主因是url协议、服务端策略与可访问性配置不匹配；必须用https://完整url，禁用协议相对路径；https页面禁用http图床；alt属性须具体描述内容型图片；外链图片需服务端配cors才支持canvas操作；关键图片应本地备份或用私有签名url。
直接用 <img> 标签插入网络图片，最常出问题的不是写法本身，而是 URL 协议、服务端策略和可访问性配置没对齐——90% 的“图片不显示”根本不是 HTML 写错了。
必须用带协议的完整 URL，不能省略 https://
浏览器不会帮你补协议，src="cdn.example.com/photo.jpg" 或 src="//cdn.example.com/photo.jpg" 都会被当成相对路径处理，本地双击打开时甚至会变成 file:/// 协议而彻底失效。
- ✅ 正确写法：
<img src="https://cdn.example.com/photo.webp?x-oss-process=image/resize,p_40" alt="描述文字"> - ❌ 错误写法：
<img src="photo.jpg">（本地路径）、<img src="//cdn.example.com/photo.jpg">（协议相对链接） - 如果图床只提供 HTTP，而你的页面是 HTTPS，现代浏览器（Chrome/Firefox/Safari）会直接屏蔽，控制台报
Mixed Content错误，图片留白 - 验证方法：右键复制
src地址 → 在新标签页中粘贴打开，能直连成功才是真可用
alt 属性不是“可填可不填”，而是强制语义要求
空 alt 或模糊描述（如 alt="image123.jpg"）会让屏幕阅读器失效、SEO 丢失关键信息，WCAG 合规检查直接标红。
- 纯装饰图才允许
alt=""；所有内容型图片必须写具体描述，例如alt="微信支付二维码，有效期2小时" - 如果图片是流程图、数据截图、错误提示界面，alt 文字要能替代图片传递完整信息
- 别依赖“以后再补”，上线前漏掉一个
alt，就可能被无障碍审计工具拦截
想用 Canvas 处理外链图片？先确认服务端是否配了 CORS
普通 <img> 显示不受跨域限制，但一旦执行 canvas.getContext('2d').drawImage() 再调 canvas.toDataURL()，就会触发 Unable to get image data from canvas because the canvas has been tainted 错误。
- 前端加
crossorigin="anonymous"没用——前提是服务端响应头必须包含Access-Control-Allow-Origin: *（或指定域名） - 加了但服务端没配？图片加载失败，Network 面板里状态码是
0，不是 403/404 - 国内主流图床、多数 CDN 默认不开放 CORS；GitHub Raw、jsDelivr 等少数服务明确支持，才放心加该属性
- 否则，Canvas 操作必须绕开：改用后端生成缩略图、加水印，或换成本地 Base64 嵌入小图
外链图片最大的风险从来不在代码里
那个 URL 明天还在不在、会不会突然加 Referer 限制、防盗链规则有没有更新、图床服务商会不会跑路——这些你完全不可控。
- 关键业务图片（如用户头像、订单凭证、产品主图）绝不应全靠外链；至少保留一份本地备份或对象存储私有桶
- 临时签名 URL（如云存储 presigned URL）有过期时间，刷新页面后失效，需服务端动态生成并注入 HTML
- 用
onerror做降级只是权宜之计：<img src="..." onerror="this.src='fallback.png'">，但 fallback 本身也得可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
