ASP.NET Core Blazor에서 이미지 작업

이 문서에서는 Blazor 앱에서 이미지 작업을 수행하는 일반적인 시나리오에 대해 설명합니다.

동적으로 이미지 소스 설정

다음 예제에서는 C# 필드를 사용하여 이미지의 소스를 동적으로 설정하는 방법을 보여 줍니다.

이 섹션의 예제에는 다음이 적용됩니다.

• 원본에서 세 개의 이미지를 가져오거나 다음 각 이미지를 마우스 오른쪽 단추로 클릭하여 로컬로 저장합니다. 이미지의 이름을 image1.png, image2.png 및 image3.png로 지정합니다.

  

• 앱의 웹 루트(wwwroot)의 images(이)라는 이름의 새 폴더에 이미지를 배치합니다. images 폴더는 시연 목적으로만 사용합니다. wwwroot 폴더에서 직접 이미지를 제공하는 것을 포함하여 원하는 폴더 레이아웃으로 이미지를 구성할 수 있습니다.

다음은 ShowImage1 구성 요소에 대한 설명입니다.

• 이미지의 소스(src)는 C#에서 imageSource 값으로 동적으로 설정됩니다.
• ShowImage 메서드는 메서드에 전달된 이미지 id 인수를 기준으로 imageSource 필드를 업데이트합니다.
• 렌더링된 단추는 images 폴더의 사용 가능한 세 이미지 각각에 대해 이미지 인수를 사용하여 ShowImage 메서드를 호출합니다. 파일 이름은 메서드에 전달된 인수를 사용하여 구성되며 images 폴더의 세 이미지 중 하나와 일치합니다.

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";
    }
}

앞의 예제에서는 C# 필드를 사용하여 이미지의 소스 데이터를 저장하지만 C# 속성을 사용하여 데이터를 저장할 수도 있습니다.

참고 항목

위 for 루프 예제의 i와 같이 람다 식에서 직접 루프 변수를 사용하지 않습니다. 직접 사용하는 경우 모든 람다 식에서 동일한 변수가 사용되어 모든 람다에서 동일한 값이 사용됩니다. 로컬 변수에서 변수의 값을 캡처합니다. 앞의 예에서:

• 루프 변수 i는 imageId에 할당됩니다.
• imageId는 람다 식에서 사용됩니다.

또는 위의 문제가 발생하지 않는 Enumerable.Range를 가진 foreach 루프를 사용합니다.

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

자세한 내용은 ASP.NET Core Blazor 이벤트 처리를 참조하세요.

이미지 데이터 스트리밍

공용 URL에서 이미지를 호스팅하는 대신 Blazor의 스트리밍 interop 기능을 사용하여 이미지를 클라이언트로 직접 보낼 수 있습니다.

이 섹션의 예제에서는 JS(JavaScript) interop을 사용하여 이미지 원본 데이터를 스트리밍합니다. 다음 setImageJS 함수는 이미지에 대한 <img> 태그 id 및 데이터 스트림을 허용합니다. 이 함수는 다음 단계를 수행합니다.

• 제공된 스트림을 ArrayBuffer로 읽어옵니다.
• Blob을 만들어 ArrayBuffer를 래핑합니다.
• 표시할 이미지의 주소로 사용할 개체 URL을 만듭니다.
• 지정된 imageElementId가 있는 <img> 요소를 새로 만든 개체 URL로 업데이트합니다.
• 메모리 누수를 방지하려면 구성 요소가 이미지 작업을 완료할 때 함수가 revokeObjectURL을(를) 호출하여 개체 URL을 삭제합니다.

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

참고 항목

위치 및 프로덕션 앱에 JS 대한 권장 사항에 대한 일반적인 지침은 ASP.NET Core Blazor 앱의 JavaScript 위치를 참조하세요.

다음 ShowImage2 구성 요소는

• System.Net.Http.HttpClient 및 Microsoft.JSInterop.IJSRuntime에 대한 서비스를 삽입합니다.
• 이미지를 표시하는 <img> 태그를 포함시킵니다.
• 이미지에 대한 Stream을(를) 검색할 GetImageStreamAsync C# 메서드가 있습니다. 프로덕션 앱은 특정 사용자에 따라 이미지를 동적으로 생성하거나 스토리지에서 이미지를 검색할 수 있습니다. 다음 예제에서는 dotnet GitHub 리포지토리에 대한 .NET 아바타를 검색합니다.
• 사용자가 단추를 선택할 때 트리거되는 SetImageAsync 메서드가 있습니다. SetImageAsync 에서는 다음 단계를 수행합니다.
  • GetImageStreamAsync에서 Stream을 검색합니다.
  • DotNetStreamReference에 Stream을 래핑하면 이미지 데이터를 클라이언트에 스트리밍할 수 있습니다.
  • 클라이언트에서 데이터를 허용하는 setImage JavaScript 함수를 호출합니다.

참고 항목

서버 쪽 앱은 전용 HttpClient 서비스를 사용하여 요청을 수행하므로 서비스 등록 HttpClient 을 위해 서버 쪽 Blazor 앱의 개발자는 아무런 조치도 필요하지 않습니다. 클라이언트 쪽 앱은 프로젝트 템플릿에서 앱을 만들 때 기본 HttpClient 서비스 등록을 갖 Blazor 습니다. HttpClient 클라이언트 쪽 앱의 파일에 서비스 등록이 Program 없는 경우 다음을 추가하여 builder.Services.AddHttpClient();제공합니다. 자세한 내용은 ASP.NET Core에서 IHttpClientFactory를 사용하여 HTTP 요청 만들기를 참조하세요.

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);
    }
}

추가 리소스

• ASP.NET Core Blazor 파일 업로드
• 파일 업로드: 이미지 미리 보기 업로드
• ASP.NET Core Blazor 파일 다운로드
• ASP.NET Core Blazor의 JavaScript 함수에서 .NET 메서드 호출
• ASP.NET Core Blazor의 .NET 메서드에서 JavaScript 함수 호출
• Blazor샘플 GitHub 리포지토리()(dotnet/blazor-samples다운로드 방법)