html - 难以将 png 图像放在 html 上的按钮上

Question

我写这样的东西：

<input id="btn1" style="width: 32px; height: 32px;" type="image" src="images/refresh.png" onclick="refresh()"/>

但是当我运行它时，它无法显示图像。它只显示一个“x”。你们知道为什么吗？我的图像尺寸是 32x32px。

Answer 1

您可能使用了错误的路径，并且您的图像不在，images/refresh.png因为当我将您的标记与另一个图像一起使用时它可以正常工作。你/一开始是这样用的/images/refresh.png吗？

jsFiddle

<input id="btn1" style="width: 32px; height: 32px;" type="image" src="https://www.google.com.au/images/srpr/logo4w.png" onclick="refresh()"/>

---

仅供参考的替代方法是使用 CSS 应用图像或使用<button>与<img>.

jsFiddle

<input id="btn1" style="width: 32px; height: 32px; background-image:url(https://www.google.com.au/images/srpr/logo4w.png);" type="button" />
<button>
    <img src="https://www.google.com.au/images/srpr/logo4w.png" style="width:32px;height:32px;" />
</button>