記事詳細

投稿日
2025年11月13日20時49分
タイトル

バイナリデータを画像に変換

内容

 画像のバイナリデータを Base64 エンコードして <img> タグとして表示する処理です。

コードの意味

<img src="data:image/jpeg;base64,@Convert.ToBase64String(item.KamokuImage)" 
     alt="@item.KamokuName" 
     style="width: 40px; height: auto;" />

1. item.KamokuImage

  • item はビューに渡されたモデルの1行（例えば foreach の中の1要素）。
  • KamokuImage は 画像データを保持する byte[] 型のプロパティ。
    • 例: データベースの varbinary カラムから取得した画像。

2. Convert.ToBase64String(item.KamokuImage)

  • C# の Convert.ToBase64String メソッドで、バイト配列を Base64 文字列に変換。
  • Base64 はバイナリデータをテキスト化する方法で、HTML内に直接埋め込むために必要。

3. src="data:image/jpeg;base64,..."

  • Data URI スキームを使って、画像データを直接 HTML に埋め込む。
  • data:image/jpeg;base64, は「これは JPEG 画像で、Base64 形式ですよ」という宣言。
  • その後に Base64 文字列が続く。

4. alt="@item.KamokuName"

  • 画像が表示できない場合に代替テキストとして表示される文字列。
  • @item.KamokuName は科目名などの文字列プロパティ。

5. style="width: 40px; height: auto;"

  • CSS で画像の表示サイズを指定。
  • 幅を 40px に固定し、高さはアスペクト比を保って自動調整。

動作イメージ

もし item.KamokuImage にバイナリ画像が入っていれば、
HTML 出力は次のようになります（Base64 部分は省略）:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ..." 
     alt="数学" 
     style="width: 40px; height: auto;" />

ブラウザはこの Base64 データをデコードして画像として表示します。

注意点

  1. パフォーマンス

    • 大きな画像を Base64 で埋め込むと HTML サイズが大きくなり、ページ読み込みが遅くなる。
    • 多数の画像を表示する場合は、通常の URL 参照（<img src="/Images/xxx.jpg">）の方が効率的。

  2. MIMEタイプの指定

    • image/jpeg の部分は画像形式に合わせて変更（PNGなら image/png）。

  3. Nullチェック

    • item.KamokuImage が null の場合はエラーになるため、条件分岐で回避する必要あり。

Nullチェック付きの安全な例

@if (item.KamokuImage != null && item.KamokuImage.Length > 0)
{
    <img src="data:image/jpeg;base64,@Convert.ToBase64String(item.KamokuImage)" 
         alt="@item.KamokuName" 
         style="width: 40px; height: auto;" />
}
else
{
    <span>No Image</span>
}

Powered by Froala Editor
添付画像
画像はありません
Genreのカテゴリ-名
Views
編集 | 記事一覧