首頁  >  文章  >  後端開發  >  如何將 .png 圖片直接嵌入到 HTML 文件中而不連結到外部文件?

如何將 .png 圖片直接嵌入到 HTML 文件中而不連結到外部文件?

DDD
DDD原創
2024-10-28 21:30:30471瀏覽

How to embed a .png image directly into an HTML document without linking to an external file?

將.png 映像嵌入HTML 頁面

如何將.png 檔案嵌入到空白的「file.html」文件中以便在任何瀏覽器中開啟檔案時顯示圖像,而無需從HTML 程式碼連結到該檔案?

答案:

將圖像嵌入到 HTML 中而不需要鏈接,利用在線 Base64 編碼器。建議的選項是http://www.greywyvern.com/code/php/binary2base64。

嵌入影像有兩種主要方法:

  • CSS:
div.image {
  width: 100px;
  height: 100px;
  background-image: url(data:image/png;base64,iVBORwA<MoreBase64StringHere>);
}
<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64StringHere>" />

標籤:在這兩種情況下,將 替換為與Base64 編碼器的輸出。

以上是如何將 .png 圖片直接嵌入到 HTML 文件中而不連結到外部文件?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn