JavaScript是一種廣泛應用于網頁開發中的編程語言。在網頁中，我們經常需要引用圖片來增強視覺效果。本文將介紹如何使用JavaScript來引用圖片，并提供相關實例代碼。 在JavaScript中，我們可以使用Image對象來引用圖片。它提供了多種方法來控制圖片的屬性、大小以及位置等。比如，我們可以使用src屬性來設置圖片的路徑，如下所示：

var img = new Image();
img.src = "image.jpg";
document.body.appendChild(img);

上述代碼首先創建了一個新的Image對象，并在src屬性中指定了圖片的路徑。最后，我們將圖片添加到文檔中。 值得注意的是，為了確保圖片已經加載完畢后再將其添加到文檔中，我們可以檢查Image對象的complete屬性，代碼如下：

var img = new Image();
img.onload = function() {
document.body.appendChild(img);
}
img.src = "image.jpg";

此代碼中，我們使用了onload事件，回調函數將在圖片加載完成后執行。這樣可以保證圖片已經準備好了再將其添加到文檔中。 除了設置圖片路徑以外，我們還可以設置圖片的寬度、高度等屬性。代碼如下：

var img = new Image();
img.src = "image.jpg";
img.width = 100;
img.height = 100;
document.body.appendChild(img);

這個代碼片段指定了圖片的寬度和高度，然后將其添加到文檔中。 另外，在使用JavaScript引用圖片時，我們可能會遇到路徑錯誤的問題。有時候，我們設置了正確的路徑，但圖片仍然無法顯示。這時候，需要檢查圖片的路徑是否正確，是否存在拼寫錯誤等問題。 如果路徑正確無誤，而圖片仍然無法顯示，可能是因為瀏覽器對外部文件的訪問權限受到了限制，可以使用相對路徑來解決這個問題。 例如，在將網站從本地開發環境移植到服務器上時，我們需要更改圖片路徑。我們可以通過使用相對路徑來實現，如下所示：

var img = new Image();
img.src = "/images/image.jpg";
document.body.appendChild(img);

上述代碼中，我們使用了相對路徑"/images/image.jpg"，表示圖片位于當前網站的根目錄下的images文件夾中。這樣，在將網站從本地環境部署到服務器上時，也不需要額外調整圖片路徑。 總結起來，通過JavaScript引用圖片是網頁開發中的常用操作。我們可以使用Image對象來設置圖片路徑、大小以及位置等屬性，還可以使用相對路徑來避免部署時路徑錯誤的問題。希望本文能夠對你在網頁開發中使用JavaScript引用圖片有所幫助。