imgは画像を扱う要素です。
閉じタグのない空要素のため、単独で記述できます。
記述例
<img src="monaca.jpg">
表示結果
主な属性
src属性(必須)
画像の場所を指定する属性です、絶対パスや相対パスで画像の場所を指定してください。
alt属性
画像を表示できなかったときのための代替となる、つまりalternative(オルタナティブ)な文章を記述します。例えば、読み上げブラウザが利用します。アクセシビリティのために存在する属性です。
よくある質問と回答
- 画像のサイズを変更したい
- スタイルシートで変更できます、インラインスタイルシートでタグに直接記述する場合は以下の記述できます。
<img src=monaca.jpg" style="width:100px;height:50px;">横幅と高さの片方だけ指定しても構いません、また、単位はピクセル以外の指定方法も可能です。
- どのような種類の画像が指定できますか？
-
代表的なものはJPEG(ジェイペグ)とPNG(ピーエヌジー・ピング）です。
昔からあるフォーマットとしてgif(ジフ・ギフ)も利用可能で「GIFアニメーション」用途では今でも使われています。また、無圧縮の画像フォーマットであるBMP(ビットマップ)も利用可能ですが、データが無駄に大きくなるため基本的には使いません。
また、ベクトル型の画像形式であるSVG(エスブイジー)も最近では利用できます。 - srcでファイルを指定せずに画像を表示できる方法がある聞いたのですが？
-
画像ファイルをBASE64エンコードした文字列を用意して、その文字列をsrc属性に記述すれば画像を出せます。用途としては、ローカルストレージなどの文字しか保存できないデータベースに画像を保存してある場合などに出番があるかもしれません。
Cordovaのカメラプラグインで画像を取得するときにも、ファイルではなくBASE64出の取得を選択することができます。