<img> 画像埋め込み要素

作成日 : 2023年12月27日
初公開日 : 2023年12月27日
更新日 : 2023年12月27日

説明


<img>はHTMLの要素で、文書に画像を埋め込みます。

表示


HTML


<img src="https://cf689829.cloudfree.jp/Hon-Atsugi_expressのホームページ/新ブログ/img/DSC04288.JPG" width="403" height="227">

表示



属性


この要素にはグローバル属性があります

alt

=

alt


alt

には、画像の説明を書きます。

alt

に書いた内容は、画像が読み込まれなかった時に表示されます。

HTML


<img src="null"

alt="表示できない画像"

>

表示


表示できない画像

crossorigin

=

mode


crossorigin

には、画像の取得にCROSを使用するか設定します。

mode

で指定できる値:

anonymous

資格情報を省略して送信します。

use-credentials

資格情報を含めて送信します

decoding

=

mode



decoding

は画像のデコードするタイミングを指定します

mode

で指定できる値:

async

他のコンテンツと非同期にデコードします

sync

他のコンテンツと同期的にデコードします

auto

ブラウザに任せます(規定値)

fetchpriority

=

priority


fetchpriority

は画像の読み込み優先度を指定します

priority

で指定できる値:

high

優先度が高い

low

優先度が低い

auto

ブラウザに任せます(規定値)

height

=

px


height

は画像の縦幅をpx単位で指定します

loading

=

loading


loading

は画像の読み込みタイミングを指定します

loading

で指定できる値:

eager

画像がビューポート範囲内に入らなくても読み込みます

lazy

画像がビューポート範囲内に入るまで読み込みを遅延させます

referrerpolicy

=

policy


referrerpolicy

はリソースを読み込むときにどのリファラーを使うか指定します

policy

で指定できる値:

no-referrer

リファラーを送信しません

no-referrer-when-downgrade

SSLを使用せずに移動した場合送信しません

origin

オリジンのみ送信されます

origin-when-cross-origin

異なるオリジンへはオリジン、同一オリジンへはフルパスが送信されます

same-origin

同一オリジンのみ送信します

strict-origin

宛先がHTTPの場合は送信しません

strict-origin-when-cross-origin

同一オリジンで宛先がHTTPでない場合は送信します(規定値)

unsafe-url

フルパスで送信します

src

=

url


src

は画像のURLを指定します

width

=

px


width

は画像の横幅を指定します