必须用 <a> 包裹 <img> 实现可点击图片链接，因 <img> 不支持 href 属性，直接添加无效且违法HTML标准；<a> 嵌套需确保 href 有效、<img> 完全在内、alt 不为空或明确设为 ""；避免 pointer-events: none 等样式干扰及错误 role/tabindex 添加。
必须用 <a> 包裹 <img>，其他写法要么无效，要么破坏语义、可访问性或安全性。
为什么不能直接给 <img> 加 href 属性
<img> 标签本身不支持 href 属性；浏览器会忽略它，点击毫无反应。常见错误写法如：<img src="logo.png" href="/home" alt="首页"> —— 这在 HTML 中非法，验证器报错，所有现代浏览器都不执行跳转。
试图用 onclick 模拟（比如 onclick="location.href='/home'"）也绕不开问题：
- 键盘用户无法按 Enter 触发（缺少焦点和原生链接行为）
- 右键菜单里没有“在新标签页打开”“复制链接地址”等选项
- 屏幕阅读器不会将其识别为链接，损害可访问性
<a> 嵌套 <img> 的最小合法结构
核心就三件事：包裹、href、alt。缺一不可。
-
<img>必须完整位于<a>开始与结束标签之间 -
<a>的href属性值必须是有效 URL（可以是相对路径/、绝对路径https://example.com或锚点#section2） -
<img>的alt属性不能为空字符串或缺失；即使图片纯装饰，也应写alt=""（此时需确认该图确实无需传达信息）
点击无响应？优先检查这些干扰项
图片显示正常但点击没反应，多数不是代码逻辑问题，而是被样式或结构干扰了：
- 父容器或
<a>自身设置了pointer-events: none（比如为了透传点击到下层地图组件） -
<img>被设了display: block但缺少高度或塌陷，导致可点击区域为 0 - CSS 中对
a img设置了vertical-align: middle等属性，意外触发基线对齐导致上边留白、点击区偏移 - JavaScript 拦截了
click事件（例如全局绑定的event.preventDefault()未加条件过滤）
要不要加 role="link" 或 tabindex？
不需要。标准嵌套结构已具备完整语义与可访问性：<a href="/home"><img src="logo.png" alt="首页"></a> 天然支持键盘导航、屏幕阅读器朗读、右键菜单全部能力。
加 role="link" 反而可能覆盖默认行为，tabindex 更是多余——<a> 默认可聚焦。
真正容易被忽略的是 alt 的取舍：空字符串 alt="" 合法，但仅限于图片完全无信息量；若含品牌、功能或操作暗示（比如“微信扫码登录”图标），就必须写明含义，否则屏幕阅读器用户会错过关键交互线索。
