如何在React Bootstrap开关按钮中添加图片图标？已尝试方案失效

算力阿峰

2026-7-29

解决BootstrapSwitchButton状态标签显示图片的问题

问题原因：你给onlabel和offlabel传的是字符串形式的HTML标签，组件会直接将其作为文本渲染，不会解析成图片元素。
正确实现方式：直接传递JSX元素给这两个属性，无需用字符串包裹：

<BootstrapSwitchButton
  onChange={onhandleswitch}
  checked={swtich}
  onlabel={<img src={logo} alt="开启状态图标" />}
  offlabel={<img src={logo} alt="关闭状态图标" />}
/>

注意事项：
- 若logo是本地资源，需先正确导入（如import logo from './assets/logo.png'）；若是网络图片，直接传入完整URL即可。
- 可给img标签添加style属性控制图标大小，比如：
```
<img src={logo} alt="开启" style={{ width: '20px', height: '20px' }} />
```
- 务必添加alt属性，提升页面可访问性。