JavaScript 是一種廣泛使用的編程語言，而在 Web 開發(fā)中，它可以用來設(shè)置 img 標(biāo)簽的內(nèi)容。舉個例子，如果我們用一個圖片鏈接作為 img 的 src 屬性，那么這個 img 標(biāo)簽就可以在頁面中顯示這張圖片。但是，有些情況下我們需要動態(tài)地設(shè)置 img 標(biāo)簽的圖片內(nèi)容，這就需要用到 JavaScript。

<img id="myImg">
<script>
var img = document.getElementById("myImg");
img.src = "https://example.com/image.jpg";
</script>

上面的代碼片段中，我們首先獲取了 id 為 myImg 的 img 標(biāo)簽，然后用 JavaScript 設(shè)置了它的 src 屬性。這樣，用戶就可以在頁面中看到一張來自 example.com 的圖片了。

不過，設(shè)置 img 標(biāo)簽的內(nèi)容不僅限于圖片鏈接。JavaScript 還提供了多種設(shè)置方式，下面我們來逐一介紹。

1.設(shè)置圖片 base64 編碼

可以使用 JavaScript 將圖片轉(zhuǎn)換成 base64 編碼，再將這個編碼字符串賦給 img 的 src 屬性，就可以動態(tài)設(shè)置圖片內(nèi)容了。

<img id="myImg">
<script>
var img = document.getElementById("myImg");
var base64 = "data:image/jpeg;base64,/9j/4AAQSk..."; // 這里省略了一長串編碼
img.src = base64;
</script>

2.設(shè)置 SVG 圖片

SVG 可以被當(dāng)做普通的圖片來使用，只需要用一個 img 標(biāo)簽，并將 SVG 文件或代碼的路徑作為 src 屬性值即可。

<img src="icon.svg" alt="SVG 圖標(biāo)">

但是，如果想直接在 HTML 中寫 SVG 代碼并使 img 標(biāo)簽顯示它，就需要利用 JavaScript 動態(tài)設(shè)置 img 內(nèi)容。

<img id="myImg" alt="SVG 圖標(biāo)">
<script>
var img = document.getElementById("myImg");
img.src = "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' wi...";
</script>

上面的代碼片段中，img 的 src 屬性的值是一個 SVG 代碼字符串，通過 data URI 方案，使瀏覽器可以將它解析成一個 SVG 圖片。

3.設(shè)置 canvas 圖片

要將 canvas 內(nèi)容作為 img 的內(nèi)容，需要用到 canvas 的 toDataURL() 方法將其轉(zhuǎn)換為 data URI。

<canvas id="myCanvas"></canvas>
<img id="myImg" alt="Canvas 圖片">
<script>
var canvas = document.getElementById("myCanvas");
var img = document.getElementById("myImg");
var dataURL = canvas.toDataURL(); // 將 canvas 轉(zhuǎn)換為 data URI
img.src = dataURL;
</script>

在上述代碼中，我們首先獲取了 id 為 myCanvas 的 canvas 元素，并且隨機(jī)畫了一個圓形。然后，通過 toDataURL() 方法將 canvas 轉(zhuǎn)換成 data URI，并將這個編碼字符串賦給 id 為 myImg 的 img 元素的 src 屬性，使它在頁面中顯示。

這就是用 JavaScript 設(shè)置 img 標(biāo)簽內(nèi)容的一些方法，相信它們可以讓我們更靈活地創(chuàng)建動態(tài)圖片和圖標(biāo)。在實(shí)際開發(fā)中，我們可以根據(jù)需要選擇不同的方式來設(shè)置 img 的內(nèi)容，從而優(yōu)化頁面性能和用戶體驗(yàn)。