HTMLImageElement.src は URI を返します(DOM L2 HTML 規定)。HTMLImageElement.src は HTML5 規定によって 絶対URL (*1) を返さなければなりません。
(*1) 絶対URL は HTML5 規定の造語。RFC2396, 2732, 3986、3987 規定には 絶対URL という用語は存在しません。
If a reflecting IDL attribute is a DOMString attribute whose content attribute is defined to contain a URL, then on getting, the IDL attribute must resolve the value of the content attribute relative to the element and return the resulting absolute URL if that was successful, or the empty string otherwise; and on setting, must set the content attribute to the specified literal value. If the content attribute is absent, the IDL attribute must return the default value, if the content attribute has one, or else the empty string.
http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflect
// img.src は URI を返す
var img, src;
img = document.createElement('img');
img.src = 'test.png';
src = img.src;
alert(src); // "http://example.com/test.png"
もし、あなたがimg要素のsrc属性値を得たいのなら element.getAttribute(name) を使うことが出来ます。
// getAttribute で属性値を得る
var img, src;
img = document.createElement('img');
img.setAttribute('test.png');
src = img.getAttribute('src');
alert(src); // "test.png"
ただし、IE7- には img.getAttribute('src') が img.src と同じ値を返すという不具合があり、img.getAttribute('src') でも絶対URLを返してしまいます。(*2)
そこで getAttribute の第二引数 (iFlags) を利用します。
(*2) この不具合は IE8 で修正されましたが、IE8 でも後方互換モードで動作しているときには IE7- と同じように動作します。
// IE7-, IE8 (後方互換モード) の場合
var img;
img = document.createElement('img');
img.setAttribute('test.png');
alert(img.getAttribute('src')); // "http://example.com/test.png"
alert(img.getAttribute('src', 2)); // "test.png"
しかし、getAttribute() の第二引数は IE の独自拡張で DOM L2 Core 仕様にはありません。
このままでは IE7- のバグのために、他にブラウザでも第二引数を指定するコードを走らせてしまうので、コードを少し書き換えます。
// (1) 条件付きコンパイル型
function getSrc1 (img) {
return img.getAttribute('src' /*@cc_on @if(@_jscript_version < 5.8) , 2 @end@*/);
}
// (2) 返り値チェック型
function getSrc2 (img) {
var src, src2;
src = img.getAttribute('src');
src2 = img.getAttribute('src', 2);
if (src !== src2) src = src2;
return src;
}
var img = document.createElement('img');
img.setAttribute('src', 'test.png');
alert(getSrc1(img)); // "test.png"
alert(getSrc2(img)); // "test.png"
(1) は IE の独自拡張「条件付きコンパイル」構文を利用して、IE が利用するJScriptエンジンのバージョンを得て IE8 が持つ JScriptバージョン5.8 未満のブラウザで第二引数を指定するようにしています。
(2) は IE の独自拡張を利用しない型。getAttribute() の第二引数が機能するかを検知したかったのですが、余りスマートではないですね。他にいい方法があったら誰か教えてください…。
HTMLImageElement.src, HTMLImageElement.getAttribute('src') の機能検証。スクリプトコードは [ソースを表示] で確認してください。
* 画像がデッドリンクなのはわざとです。JavaScript の動作検証には不要なので画像ファイルはおいていません。
JavaScript で HTMLImageElement.src, HTMLImageElement.getAttribute('src'), HTMLImageElement.getAttribute('src', 2) を参照した結果。