img.srcは空文字だと現在のURLなのでgetAttribute('src')のほうが良い

img.srcは空文字だと現在のURL

Zennを見ていたらimgタグのsrc属性の仕様に関する記事がありました。

img.srcは空文字だと現在のURLを返します。

例えば以下のコードはimgタグのsrc属性の値を空文字にしてありますが、console.log(img.src)を実行すると、実行したWebページのURLが表示されます。

JavaScript

const img = document.createElement('img')
img.src = ''
console.log(img.src)
// 'https://iwb.jp/'

これだとJavaScriptで値が空文字の場合に何かの処理をしたいときに意図通りに動作しなくなります。

そのため、空文字の場合は現在のWebページのURLではなく、空文字を返したい場合はimg.getAttribute('src')を使用したほうが良いです。

JavaScript

const img = document.createElement('img')
img.src = ''
const srcValue = img.getAttribute('src')
console.log(srcValue)
// ''

ただし、img.getAttribute('src') だと '/' のような相対パスの場合はそのまま '/' の文字列を返し、img.srcのようにURLを絶対パスで返さないので、相対パスと絶対パスを併用しているWebページの場合は別途注意が必要です。

JavaScript

const img = document.createElement('img')
img.src = '/'
const srcValue = img.getAttribute('src')
console.log(srcValue)
// '/'

JavaScript

const img = document.createElement('img')
img.src = '/'
console.log(img.src)
// 'https://iwb.jp/'

HTMLの仕様ではsrc属性を空文字は仕様違反ですが、JavaScriptであとからURLを挿入するなどの処理のために空文字にしているHTMLコードをたまに見かけます。

最近だとJestやE2Eのテストコードなどで、img.srcでsrc属性の値を取得するコードが書かれているケースも見かけますので、img.srcを使用している方はご注意ください。