JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLのimgタグで別ドメインの画像URL（src）を指定する方法

Webページに画像を表示するには、<img>タグを使用します。このタグを使うことで、画像のソース（src）、代替テキスト（alt）、幅（width）、高さ（height）などの情報を指定できます。

src属性には画像のURLを指定します。alt属性は代替テキストであり、画像が何らかの理由で読み込めなかった場合に代わりに表示されるテキストです。

HTMLでは、別のドメイン上にある画像も簡単に表示できます。その場合は、src属性の値として、外部ドメインへの完全なURLを指定するだけです。

imgタグの主な属性一覧

No.属性と説明
1alt
画像の代替テキスト。画像が表示できない場合に表示されます。
2height
画像の高さを指定します。
3ismap
画像をサーバーサイド・イメージマップとして扱います。
4longdesc
画像の詳細な説明が書かれたページへのURLを指定します。
5src
画像ファイルのURLを指定します。必須の属性です。
6usemap
画像をクライアントサイド・イメージマップとして扱います。
7width
画像の幅を指定します。

注意点

<img>タグは終了タグを持たない空要素である点に注意してください。つまり、</img>のような閉じタグは不要です。

サンプルコード：別ドメインの画像を表示する

以下のコードを実行すると、別ドメインにある画像URLをimgタグのsrcに設定して表示できます。

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <h2>Qries</h2>
      <img src="https://www.qries.com/images/banner_logo.png" alt="Qries" width="200" height="90">
   </body>
</html>

この例では、https://www.qries.com/images/banner_logo.pngという外部ドメインの画像を読み込み、幅200px・高さ90pxで表示しています。alt属性にも「Qries」という代替テキストを設定しているため、画像が読み込めない環境でも内容が伝わります。

このように、src属性に絶対URL（https://から始まる完全なURL）を指定すれば、自サイト以外のドメインにある画像でも問題なく表示できます。ただし、相手側のサーバーでホットリンク（直リンク）が禁止されている場合や、画像が削除された場合には表示できなくなるため、実運用では利用規約の確認やエラー時の代替表示も検討しておくと安心です。

  1. JavaScriptで<strong>タグにテキストを設定する方法

    Webページ上のテキストを動的に書き換えたい場面は多くあります。この記事では、jQueryを使用して<strong>タグ内のテキストをJavaScriptで変更する方法を、手順とコード例とともにわかりやすく解説します。手順1：<strong>要素を用意するまず、HTML内にテキストを差し替えたい<strong>要素を配置します。後からJavaScript側でこの要素を指定できるよう、id属性を付けておくのがポイントです。<strong id="strongDemo">Replace This strong tag</st

  2. HTMLのdatalistタグの使い方！入力候補リストを作成する方法

    datalistタグとは？HTMLの<datalist>タグは、<input>要素に対して選択肢（候補リスト）を定義するためのタグです。テキストフィールドにユーザーが入力を始めると、あらかじめ用意された候補がドロップダウン形式で表示されるため、入力の手間を減らし、入力ミスを防ぐことができます。<datalist>タグを使用する際のポイントは以下の2点です。・<input>要素側にlist属性を指定し、その値と<datalist>要素のid属性を一致させる・選択肢は<datalist>〜</datalist>の中