Blazor チュートリアル - 画像を表示する

はじめに

チュートリアルを進めて、Blazorアプリ上で画像ファイルを表示させる方法について学びます。（詳細は一番下の参考ページにあります。）
簡単な画像Viewerを作成します。

完成イメージ：ボタンを押すと画像が切り替わります。画像は３種類です。

準備

Blazorアプリを新規作成して、編集していきます。
本記事ではindex.razorに追記していきます。

表示させる画像を用意してImagesフォルダを新規作成してその中に入れます。

Image Creator from Microsoft Bingで画像を作ってみました。

①image1.jpg
②image2.jpg
③image3.jpg

見た目を変えるためにindex.razor.cssファイルを作成します。

下記のようになっていればOKです。

画像を表示させる

ボタンを押した時に画像が切り替わるようにします。
ShowImageメソッドに画像idを渡すことでimage1.jpg , image2.jpg , image3.jpgを切り替えます。

@code {
    private string? imageSource;

    private void ShowImage(int id)
    {
        imageSource = $"images/image{id}.jpg";
    }
}

ボタンを配置します。ボタンを押した時の動作は@onclick="() => ShowImage(imageId)"です。

@for (var i = 1; i <= 3; i++)
{
    var imageId = i;
    <button class="btn" @onclick="() => ShowImage(imageId)">
        Image @imageId
    </button>
}

画像を表示するためにimgタグを使用します。srcには表示させたい画像の場所を指定します。
アプリ起動時は画像が未選択なので<p>Please Select Image.</p>を表示するようにしています。

@if (imageSource is not null)
{
    <p class="card">
        <img src="@imageSource" />
    </p>
}
else
{
    <p>Please Select Image.</p>
}

完成形

index.razor

@page "/"

<h1>Dynamic Image Source Example</h1>

@for (var i = 1; i <= 3; i++)
{
    var imageId = i;
    <button class="btn" @onclick="() => ShowImage(imageId)">
        Image @imageId
    </button>
}

@if (imageSource is not null)
{
    <p class="card">
        <img src="@imageSource" />
    </p>
}
else
{
    <p>Please Select Image.</p>
}

@code {
    private string? imageSource;

    private void ShowImage(int id)
    {
        imageSource = $"images/image{id}.jpg";
    }
}

index.razor.css

.card {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #f7f7f7;
}

    .card img {
        max-width: 100%;
        height: auto;
    }

.btn {
    display: inline-block;
    padding: 10px 20px;
    margin:10px 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn {
    background-color: #0056b3;
}

参考ページ