单选按钮无法直接显示图片，需用label包裹隐藏的radio并设置图片样式；通过input:checked + label控制选中状态；value应为业务标识而非图片路径，图片映射由JS查表实现。
单选按钮本身不能直接显示图片
HTML 的 <input type="radio"> 是纯表单控件，不支持内嵌 <img alt="如何在HTML单选按钮组中添加图片选项" > 或背景图渲染。强行在标签里写图片会导致无效或被忽略——浏览器只认 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 alt="如何在HTML单选按钮组中添加图片选项" >） - 为已选中状态添加样式时，用
input:checked + label或input:checked ~ label（取决于 DOM 结构）
<input type="radio" name="icon" id="opt1" value="apple"> <label for="opt1"><img src="apple.png" alt="Apple"></label> <input type="radio" name="icon" id="opt2" value="banana"> <label for="opt2"><img src="banana.png" alt="Banana"></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 alt="如何在HTML单选按钮组中添加图片选项" > 标签，要注意：
立即学习“前端免费学习笔记（深入）”；
- label 必须设明确宽高，否则背景图不显示（
<img alt="如何在HTML单选按钮组中添加图片选项" >自带 intrinsic size） - 图片路径错误时无提示，只留空白；建议先用
<img alt="如何在HTML单选按钮组中添加图片选项" >调通再换 - 高分辨率屏（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 onload alt="如何在HTML单选按钮组中添加图片选项" > 或 <img onerror alt="如何在HTML单选按钮组中添加图片选项" > 监听来降级显示文字或占位符。
