图片不显示主因是服务端策略：防盗链（Referer拦截）、HTTPS页面加载HTTP资源被屏蔽、临时签名URL过期、CORS策略限制，而非HTML代码错误；需通过新标签页直连验证根源。
<img> 标签直接写 src 属性就能插入网络图片，不需要额外配置或跨域处理——但前提是目标服务器允许被引用。
为什么有些网络图片死活不显示？
常见原因不是代码写错，而是图片 URL 本身或服务端策略问题：
-
src地址返回 403/404 错误（比如防盗链，Referer被拦截） - URL 是 HTTP 协议，但当前页面是 HTTPS，浏览器主动屏蔽混合内容
- 图片地址带临时签名或会过期（如云存储的 presigned URL），刷新页面后失效
- 服务器设置了
Cross-Origin-Resource-Policy: same-origin，禁止外站加载
<img> 的 src 必须是完整 URL 吗？
是的。相对路径只对本地文件有效；网络图片必须用协议开头的绝对 URL：
<img src="https://example.com/photo.jpg"> <img src="http://cdn.site.org/logo.png"> <!-- 不推荐，HTTPS 页面中可能被禁用 -->
注意：src 值里不能有空格、中文或未编码的特殊字符；含参数的 URL（如 ?v=123）要确保整个字符串被正确拼接，避免截断。
立即学习“前端免费学习笔记（深入）”；
能加 crossorigin 属性绕过防盗链吗？
不能。这个属性只影响浏览器是否在请求头中携带 Origin，用于 CORS 图片读取（比如后续用 Canvas 操作），对防盗链（Referer 校验）完全无效。
真正有用的应对方式只有这些：
- 确认图片服务支持 Referer 白名单，并把你的域名加进去
- 用后端代理中转（比如
/api/image?url=https%3A%2F%2Fxxx.com%2F1.jpg） - 换图床，选明确支持外链且无 Referer 限制的服务（如 GitHub Raw、jsDelivr）
最常被忽略的一点：开发者工具里看到 net::ERR_CONNECTION_REFUSED 或 Failed to load resource，第一反应不该是改 HTML，而是右键图片地址 → 在新标签打开，看能不能直连——连不上，问题就不在你的代码里。
