Usare le immagini in ASP.NET Core Blazor

Questo articolo descrive gli scenari comuni per l'uso delle immagini nelle Blazor app.

Impostare dinamicamente un'origine immagine

L'esempio seguente illustra come impostare dinamicamente l'origine di un'immagine con un campo C#.

Per l'esempio in questa sezione:

• Ottenere tre immagini da qualsiasi origine o fare clic con il pulsante destro del mouse su ognuna delle immagini seguenti per salvarle in locale. Assegnare alle immagini image1.pngil nome , image2.pnge image3.png.

  

• Inserire le immagini in una nuova cartella denominata images nella radice Web dell'app (wwwroot). L'uso della images cartella è solo a scopo dimostrativo. È possibile organizzare le immagini in qualsiasi layout di cartella preferito, inclusa la gestione delle immagini direttamente dalla wwwroot cartella.

Nel componente ShowImage1 seguente:

• L'origine dell'immagine (src) viene impostata dinamicamente sul valore di imageSource in C#.
• Il ShowImage metodo aggiorna il imageSource campo in base a un argomento immagine id passato al metodo .
• I pulsanti sottoposti a rendering chiamano il ShowImage metodo con un argomento immagine per ognuna delle tre immagini disponibili nella images cartella. Il nome del file è composto usando l'argomento passato al metodo e corrisponde a una delle tre immagini nella images cartella.

ShowImage1.razor:

@page "/show-image-1"

<PageTitle>Show Image 1</PageTitle>

<h1>Show Image Example 1</h1>

@if (imageSource is not null)
{
    <p>
        <img src="@imageSource" />
    </p>
}

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

@code {
    private string? imageSource;

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

L'esempio precedente usa un campo C# per contenere i dati di origine dell'immagine, ma è anche possibile usare una proprietà C# per contenere i dati.

Nota

Evitare di usare una variabile di ciclo direttamente in un'espressione lambda, ad esempio i nell'esempio di ciclo precedente for . In caso contrario, la stessa variabile viene usata da tutte le espressioni lambda, che comporta l'uso dello stesso valore in tutte le espressioni lambda. Acquisire il valore della variabile in una variabile locale. Nell'esempio precedente:

• La variabile i di ciclo viene assegnata a imageId.
• imageId viene usato nell'espressione lambda.

In alternativa, usare un foreach ciclo con Enumerable.Range, che non soffre del problema precedente:

@foreach (var imageId in Enumerable.Range(1,3))
{
    <button @onclick="() => ShowImage(imageId)">
        Image @imageId
    </button>
}

Per altre informazioni, vedere ASP.NET Gestione degli eventi CoreBlazor.

Trasmettere i dati dell'immagine

Un'immagine può essere inviata direttamente al client usando Blazorle funzionalità di interoperabilità di streaming anziché ospitare l'immagine in un URL pubblico.

L'esempio in questa sezione trasmette i dati dell'origine immagine usando l'interoperabilità JavaScript (JS). La funzione seguente setImageJS accetta il tag id e il <img> flusso di dati per l'immagine. La funzione esegue i passaggi seguenti:

• Legge il flusso fornito in un oggetto ArrayBuffer.
• Crea un Blob oggetto per eseguire il wrapping dell'oggetto ArrayBuffer.
• Crea un URL dell'oggetto da usare come indirizzo per l'immagine da visualizzare.
• Aggiornamenti l'elemento con l'oggetto <img> specificato imageElementId con l'URL dell'oggetto appena creato.
• Per evitare perdite di memoria, la funzione chiama revokeObjectURL per eliminare l'URL dell'oggetto al termine dell'utilizzo di un'immagine.

<script>
  window.setImage = async (imageElementId, imageStream) => {
    const arrayBuffer = await imageStream.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    const image = document.getElementById(imageElementId);
    image.onload = () => {
      URL.revokeObjectURL(url);
    }
    image.src = url;
  }
</script>

Nota

Per indicazioni generali sulla JS posizione e i suggerimenti per le app di produzione, vedere Posizione JavaScript nelle app ASP.NET CoreBlazor.

Componente seguente ShowImage2 :

• Inserisce i servizi per un oggetto System.Net.Http.HttpClient e Microsoft.JSInterop.IJSRuntime.
• Include un <img> tag per visualizzare un'immagine.
• Dispone di un GetImageStreamAsync metodo C# per recuperare un oggetto Stream per un'immagine. Un'app di produzione può generare dinamicamente un'immagine in base all'utente specifico o recuperare un'immagine dall'archiviazione. L'esempio seguente recupera l'avatar .NET per il dotnet repository GitHub.
• Dispone di un SetImageAsync metodo attivato dalla selezione del pulsante da parte dell'utente. SetImageAsync esegue i passaggi seguenti:
  • Recupera l'oggetto Stream da GetImageStreamAsync.
  • Esegue il wrapping di Stream in un DotNetStreamReferenceoggetto , che consente di trasmettere i dati dell'immagine al client.
  • Richiama la setImage funzione JavaScript, che accetta i dati nel client.

Nota

Le app lato server usano un servizio dedicato HttpClient per effettuare richieste, quindi non è richiesta alcuna azione da parte dello sviluppatore di un'app lato Blazor server per registrare un HttpClient servizio. Le app sul lato client hanno una registrazione del servizio predefinita HttpClient quando l'app viene creata da un Blazor modello di progetto. Se una HttpClient registrazione del servizio non è presente nel Program file di un'app lato client, specificarne una aggiungendo builder.Services.AddHttpClient();. Per altre informazioni, vedere Effettuare richieste HTTP usando IHttpClientFactory in ASP.NET Core.

ShowImage2.razor:

@page "/show-image-2"
@inject HttpClient Http
@inject IJSRuntime JS

<PageTitle>Show Image 2</PageTitle>

<h1>Show Image Example 2</h1>

<p>
    <img id="image" />
</p>

<button @onclick="SetImageAsync">
    Set Image
</button>

@code {
    private async Task<Stream> GetImageStreamAsync()
    {
        return await Http.GetStreamAsync(
            "https://avatars.githubusercontent.com/u/9141961");
    }

    private async Task SetImageAsync()
    {
        var imageStream = await GetImageStreamAsync();
        var dotnetImageStream = new DotNetStreamReference(imageStream);
        await JS.InvokeVoidAsync("setImage", "image", dotnetImageStream);
    }
}

Risorse aggiuntive

• ASP.NET caricamenti di file di base Blazor
• Caricamenti di file: caricare l'anteprima dell'immagine
• download di file core Blazor ASP.NET
• Chiamare metodi .NET da funzioni JavaScript in ASP.NET Core Blazor
• Chiamare funzioni JavaScript da metodi .NET in ASP.NET Core Blazor
• Blazorrepository GitHub di esempi () (dotnet/blazor-samplescome scaricare)