html - htmlのボタンにpng画像を配置するのが難しい

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ですか？

jsフィドル

<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>.

jsフィドル

<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>