如何为设置type="button"属性的img元素添加按钮显示文字？

问题原因 #

<img> 本质是图像元素，不属于原生表单按钮控件，即便添加 type="button" 属性也不支持 value 属性的文本展示逻辑，所以设置 value 不会生效。

可行解决方案 #

按你的需求场景选择对应实现方式：

1. 常规按钮（同时展示图标+常驻文字，最规范） #

用 <button> 标签包裹图像和文字，原生支持按钮交互逻辑，无需额外绑定基础按钮事件：

<button type="button">
  <img src="ans.png" alt="按钮图标">
  你要展示的按钮文字
</button>

如果需要去掉按钮默认样式，可添加以下CSS：

button {
  /* 清除默认按钮样式 */
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  /* 调整图标和文字排版 */
  display: inline-flex;
  align-items: center;
  gap: 6px; /* 图标和文字的间距，可自定义 */
}

2. 悬浮展示提示文字 #

如果只需要鼠标悬浮在按钮上才显示文字，直接给img添加title属性即可：

<img type="button" src="ans.png" title="你要展示的悬浮文字" alt="按钮图标">

3. 图片加载失败时显示替代文字 #

如果是需要图片加载异常时显示替代提示，修改alt属性即可：

<img type="button" src="ans.png" alt="图片加载失败时显示的文字">

内容的提问来源于stack exchange，提问作者whitebear