把一个PNG图像放在html上的按钮上很困难 [英] Difficulty with putting an png image on a button on html

问题描述

我写了这样的内容：

I write something like this:

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

但是当我运行它时，它无法显示图像。它只显示'x'。你们知道为什么吗？
我的图片大小为32x32px。

But when I run it, it can't show the image. It show a 'x' only. Do you guys know why? My image size is 32x32px.

推荐答案

您可能使用了错误的路径，而您的图片不在 images / refresh.png ，因为当我在其他图像上使用标记时它工作正常。您是否在开始时使用 / ，例如 /images/refresh.png ？

You are probably using the wrong path and your image is not located at images/refresh.png as it works fine when I use your markup with another image. Did you to use / at the start like this /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或使用<按钮> 标签并结合< 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>

这篇关于把一个PNG图像放在html上的按钮上很困难的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！