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

システムドライブの画像をHTMLのimgタグのsrcに指定する方法

Webページに画像を表示するimgタグとは

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

src属性には画像のURLを設定し、alt属性には画像が読み込めなかった場合に代わりに表示されるテキストを記述します。

システムドライブのパスをsrcに指定する方法

HTMLでは、システムドライブ上のファイルパスをそのまま画像のソースとして指定することも可能です。その場合は、src属性に画像が保存されているドライブのパスを設定します。

記述例：file:/D:/images/logo.png

imgタグの主な属性一覧

番号属性と説明
1Alt
画像の代替テキスト
2Height
画像の高さ
3Ismap
画像をサーバーサイドイメージマップとして扱う
4Longdesc
画像の詳細な説明文へのURL
5Src
画像のURL
6Usemap
画像をクライアントサイドイメージマップとして扱う
7Width
画像の幅

なお、<img>タグには終了タグが存在しない点にも注意してください。

サンプルコード

以下のコードを実行すると、システムドライブからimgタグのsrcを設定できます。
注意：ローカルドライブのパスを参照しているため、このコードはローカル環境でのみ動作します。

<!DOCTYPE html>
<html>
   <head>
      <title>
         HTML img tag
      </title>
   </head>

   <body>
      <img src="file:/D:/images/logo.png" alt="Site Logo" width="50" height="50">
   </body>
</html>

補足：fileパス利用時の注意点

fileスキームによる絶対パスは、ブラウザのセキュリティ制約により環境によって正しく表示されない場合があります。実際にWebサイトを公開する際は、HTMLファイルからの相対パス、またはWeb上のURLをsrcに指定するのが一般的です。ローカルでの動作確認や社内ツールなど、限定的な用途でfileパスを活用しましょう。

  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>の中