如何在沒有外部連結的情況下將 PNG 圖像直接嵌入到 HTML 頁面中？

在HTML 頁面中嵌入PNG 圖像

在數位領域，圖像在增強用戶體驗和傳達視覺訊息方面發揮著至關重要的作用。 Web 開發人員面臨的一個常見問題是如何將可移植網頁圖形 (PNG) 圖像直接嵌入到 HTML 頁面中，而不從外部連結到該頁面。

使用 Base64 編碼嵌入圖片

要將 PNG 圖片嵌入 HTML，我們可以利用 Base64 編碼。此過程將二進位圖像資料轉換為可以嵌入 HTML 程式碼中的字串。

一些線上 Base64 編碼器可以協助完成此任務。建議的工具位於 http://www.greywyvern.com/code/php/binary2base64。

對影像進行編碼後，您可以使用以下兩種方法之一嵌入它：

1。使用 CSS 背景圖片屬性：

建立一個 div 元素並將其背景圖片屬性設定為 Base64 編碼的字串。例如：

<code class="css">div.image {
  width: 100px;
  height: 100px;
  background-image: url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}</code>

2。使用 標籤：

或者，您可以使用 標籤直接嵌入影像。 src 屬性將編碼字串作為其值。例如：

<code class="html"><img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" /></code>

透過使用這些方法，您可以成功地將 PNG 圖像嵌入到 HTML 頁面中，從而無需外部文件引用即可顯示它們。

以上是如何在沒有外部連結的情況下將 PNG 圖像直接嵌入到 HTML 頁面中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！