在前端開發中，我們經常會用到JavaScript來獲取圖片的源地址（src），以便我們可以進行更多的操作。例如，我們可能需要動態更改一個圖片元素的src地址來顯示不同的圖片，或是需要預加載一個圖片等等。在本文中，我們將探討多種方法來獲取圖片的src地址。

第一種方式是通過DOM操作獲取圖片的src地址。我們可以使用JavaScript中的document對象來獲取圖片元素，然后使用getAttribute()方法來獲取src屬性值。

var imgElement = document.getElementById('myImg');
var src = imgElement.getAttribute('src');

使用這種方式需要先獲取img元素，然后再通過getAttribute()方法獲取src屬性值。這種方式比較簡單，但也有一些限制。如果圖片元素還沒有加載完成，獲取src屬性值會返回一個空字符串。此外，如果圖片的src屬性已經被修改，但是img元素本身還沒有加載完畢，那么也無法獲取新的src屬性值。

第二種方式是通過jQuery獲取圖片的src地址。jQuery是一個功能強大的JavaScript庫，可以簡化許多常見的編程任務。使用jQuery操作DOM元素更加方便，可以省去許多繁瑣的代碼。

var src = $('#myImg').attr('src');

這種方式要求我們在項目中引入jQuery庫。使用jQuery的attr()方法可以直接獲取img元素的src屬性值。與第一種方式相比，這種方式更加簡單、易讀。

第三種方式是使用JavaScript的XMLHttpRequest對象來獲取圖片的src地址。XMLHttpRequest是一個瀏覽器內置對象，可以發送網絡請求并獲取響應。我們可以使用這個對象來發送一個GET請求，然后從響應中獲取圖片的二進制數據，最終轉換為base64編碼格式。通過這種方式，我們可以獲取任何大小、任何來源的圖片的src屬性值。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'myImage.png', true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (this.status == 200) {
var reader = new FileReader();
reader.onloadend = function() {
var src = reader.result;
// do something with the base64 encoded image data
}
reader.readAsDataURL(this.response);
}
};
xhr.send();

這種方式比較復雜，需要使用異步回調，但是也是最靈活的。使用XMLHttpRequest獲取圖片的src屬性值可以直接從服務器端獲取圖片，并且支持跨域訪問。

以上是獲取圖片src地址的三種方式，每種方式都有其優點和局限性。通過本文的介紹，我們可以更加靈活地處理圖片和其他元素，以提高我們的合作力和團隊的生產力。