記事詳細

投稿日
2025年11月13日21時03分
タイトル

ASP.NET MVC のコントローラー経由で画像を配信する方法

内容

<img src="data:image/png;base64,..."> のような Base64埋め込み方式 は HTML が肥大化し、ブラウザキャッシュも効きにくいという欠点があります。
これを ASP.NET MVC のコントローラー経由で画像を配信する方法に変えるには、FileResult を使って画像を返すエンドポイントを作り、<img src="..."> でそのURLを指定します。

実装例

1. コントローラーで画像配信アクションを作成

using System;
using System.Web.Mvc;

public class ImageController : Controller
{
    /// <summary>
    /// DBやファイルから画像を取得して返す
    /// </summary>
    /// <param name="id">画像ID</param>
    public ActionResult GetKamokuImage(int id)
    {
        try
        {
            // 例: DBから画像バイト配列を取得
            byte[] imageBytes = GetImageFromDatabase(id); // 実装は別途
            if (imageBytes == null || imageBytes.Length == 0)
            {
                return HttpNotFound(); // 画像がない場合
            }

            // MIMEタイプを適切に設定（例: PNG）
            return File(imageBytes, "image/png");
        }
        catch (Exception ex)
        {
            // ログ出力など
            return new HttpStatusCodeResult(500, "画像取得エラー");
        }
    }

    private byte[] GetImageFromDatabase(int id)
    {
        // 実際にはDBアクセスコードを書く
        // ここではダミーでnullを返す
        return null;
    }
}

2. View 側で <img> タグを変更

Base64埋め込みではなく、コントローラーのURLを指定します。

@foreach (var item in Model)
{
    <img src="@Url.Action("GetKamokuImage", "Image", new { id = item.Id })"
         alt="@item.KamokuName"
         style="width: 40px; height: auto;" />
}

3. この方式のメリット

  • HTMLサイズ削減：Base64文字列をHTMLに埋め込まないため軽量化。
  • ブラウザキャッシュ有効：同じURLならブラウザがキャッシュを利用。
  • 遅延読み込み可能：loading="lazy" などの属性が使える。
  • セキュリティ制御：コントローラーで認証・認可チェックが可能。

4. キャッシュ制御（任意）

もし画像が頻繁に変わらない場合は、HTTPヘッダーでキャッシュを有効化できます。

Response.Cache.SetCacheability(HttpCacheability.Public);
Response.Cache.SetMaxAge(TimeSpan.FromDays(30));
return File(imageBytes, "image/png");

✅ この方法にすれば、
<img src="data:image/png;base64,..."> のような長いHTMLを避けつつ、
ASP.NET MVC の FileResult を使って効率的に画像を配信できます。


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