单选按钮无法直接显示图片，需用label包裹隐藏的radio并设置图片样式；通过input:checked + label控制选中状态；value应为业务标识而非图片路径，图片映射由JS查表实现。
单选按钮本身不能直接显示图片
HTML 的 <input type="radio"> 是纯表单控件，不支持内嵌 <img> 或背景图渲染。强行在标签里写图片会导致无效或被忽略——浏览器只认 value 和 name 属性，其余视觉内容必须靠外部手段实现。
用 label + 隐藏 radio 实现点击图片选中
这是最可靠、无障碍兼容的做法：把 <input type="radio"> 放进 <label></label>，用 CSS 隐藏它，再让 label 显示图片并响应点击。
- 确保每个
<input>有唯一id，对应<label></label>的for属性 - 用
display: none或position: absolute; clip: rect(0 0 0 0)隐藏 radio（后者更利于屏幕阅读器） - 给
<label></label>设置display: inline-block和图片样式（background-image或内嵌<img>） - 为已选中状态添加样式时，用
input:checked + label或input:checked ~ label（取决于 DOM 结构）
<input type="radio" name="icon" id="opt1" value="apple"><label for="opt1">@@##@@</label> <input type="radio" name="icon" id="opt2" value="banana"><label for="opt2">@@##@@</label>
然后加 CSS：
input[type="radio"] { position: absolute; clip: rect(0 0 0 0); }
label img { cursor: pointer; border: 2px solid transparent; }
input:checked + label img { border-color: #007bff; }
避免用 background-image 做图标时的常见坑
如果用 CSS background-image 替代 <img src="apple.png" alt="Apple"> 标签，要注意：
- label 必须设明确宽高，否则背景图不显示（
<img src="banana.png" alt="Banana">自带 intrinsic size） - 图片路径错误时无提示，只留空白；建议先用
<img>调通再换 - 高分辨率屏（Retina）下需配
background-size和@media (-webkit-min-device-pixel-ratio: 2)处理 2x 图 - 无法自动读取图片自然尺寸，
alt文本也丢失，可访问性下降
提交后如何获取选中的图片对应值
后端或 JS 拿到的仍是 value 字符串，不是图片 URL。所以关键在初始化时把图片语义映射到 value：
- value 应该是业务标识（如
"user_avatar"），不是"./imgs/avatar.jpg" - 前端若需动态展示对应图片，用 JS 查表：
const map = { user_avatar: 'avatar.jpg', logo_dark: 'logo-dark.svg' } - 不要依赖 DOM 中的
src属性取值——它可能被 JS 修改、缓存或未加载完成
复杂点在于：图片加载失败时，label 可能空着，但 radio 仍可选中。得加 <img> 或 <img> 监听来降级显示文字或占位符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
