피드백

Image.Source 속성

  • 참조

정의

네임스페이스:
Windows.UI.Xaml.Controls
편집

이미지의 원본을 가져오거나 설정합니다.

public:
 property ImageSource ^ Source { ImageSource ^ get(); void set(ImageSource ^ value); };
ImageSource Source();

void Source(ImageSource value);
public ImageSource Source { get; set; }
var imageSource = image.source;
image.source = imageSource;
Public Property Source As ImageSource
<Image Source="uri"/>

속성 값

ImageSource

그린 이미지의 이미지 원본 파일을 나타내는 개체입니다. 일반적으로 유효한 이미지 원본 파일의 BitmapImage 경로를 설명하는 URI(Uniform Resource Identifier)를 사용하여 생성된 개체를 사용하여 설정합니다. 또는 스토리지 파일에서 스트림을 BitmapSource 사용하여 스트림을 초기화할 수 있습니다.

설명

Source 속성을 설정하는 것은 기본적으로 비동기 작업입니다. 속성이므로 대기 가능한 구문은 없지만 대부분의 시나리오에서는 이미지 원본 파일 로드의 비동기 측면과 상호 작용할 필요가 없습니다. 프레임워크는 이미지 원본이 반환될 때까지 기다렸다가 이미지 원본 파일을 사용할 수 있게 되면 레이아웃을 다시 실행합니다.

원본을 유효한 이미지 원본 파일로 확인할 수 없는 URI(Uniform Resource Identifier) 값으로 설정해도 예외가 발생하지 않습니다. 대신 이벤트를 발생합니다 ImageFailed . 디코딩 실패도 발생 ImageFailed합니다. 처리기를 ImageFailed 작성하고 개체에 Image 연결하여 이를 감지하고 이벤트 데이터를 사용하여 ErrorMessage 오류의 특성을 확인할 수 있습니다. 또한 이미지 원본 파일이 올바르게 로드되었는지 확인하려는 경우 요소에서 ImageOpened Image 이벤트를 처리할 수 있습니다.

XAML에서 원본 설정

XAML에서 Source 속성을 특성으로 설정할 수 있습니다. 이 경우 원본 특성 값을 원본 이미지 파일의 위치를 설명하는 URI(Uniform Resource Identifier) 문자열로 설정합니다. 이 동작은 문자열을 URI(Uniform Resource Identifier)로 처리하고 생성자에 해당하는 값을 호출하는 기본 형식 변환에 BitmapImage(Uri) 의존합니다. URI(Uniform Resource Identifier) 문자열을 사용하여 Source 속성을 설정하는 것은 XAML에서 사용하는 바로 가기입니다. 여기서 URI(Uniform Resource Identifier)는 상대적인 URI(Uniform Resource Identifier)로 나타납니다. 부분 URI(Uniform Resource Identifier)를 지원하는 것은 또 다른 XAML 바로 가기입니다.

<Image Width="200" Source="Images/myImage.png"/>

XAML 파서는 구문 분석 중인 XAML 페이지의 기본 URI(Uniform Resource Identifier)를 사용하여 상대 URI(Uniform Resource Identifier)를 나타내는 문자열을 해석합니다. 예를 들어 XAML에서 "Images/myImage.png" 값을 지정하는 경우 해당 문자열은 XAML 페이지 자체가 있는 앱 패키지 내의 기본 URI(Uniform Resource Identifier) 위치에 추가되는 상대 경로 접미사로 해석됩니다. 이전 Image 요소가 앱 패키지의 루트에 있는 페이지에 추가되면 URI(Uniform Resource Identifier)가 ms-appx:///Images/myImage.png 해석됩니다. 앱의 Image Pages 폴더에 있는 페이지에 추가된 경우 URI(Uniform Resource Identifier)는 ms-appx:///Pages/Images/myImage.png 해석됩니다.

원본 이미지가 앱 패키지의 일부가 아닌 경우 절대 URI(Uniform Resource Identifier)를 사용하여 XAML에서 원본 속성을 설정해야 합니다. 자세한 내용은 파일 리소스를 로드하는 방법 및 이 문서의 뒷부분에 있는 예제를 참조하세요.

유효한 원본이 있는 개체 요소를 속성 값으로 지정하여 BitmapImage XAML의 속성 요소 구문도 사용할 수 있습니다.

코드에서 원본 설정

코드에서 Image.Source 속성을 설정하려면 생성해야 하는 (또는BitmapSource) 인스턴스 BitmapImage 가 필요합니다. 이미지 원본이 스트림인 경우 비동기 SetSourceAsync 메서드 BitmapImage 를 사용하여 스트림에서 이미지 정보를 정의합니다.

이미지 원본이 URI(Uniform Resource Identifier)에서 참조하는 파일인 경우 속성을 설정 BitmapImage.UriSource 하거나 URI(Uniform Resource Identifier) 매개 변수를 사용하는 생성자를 사용합니다 BitmapImage . Windows 런타임 URI(Uniform Resource Identifier)가 절대적이어야 하며, Windows 런타임 코드에서는 상대 URI(Uniform Resource Identifier)를 사용할 수 없습니다. .NET Framework System.Uri 값을 사용하고 UriKind 값이 필요한 서명을 사용하는 경우 절대 값을 지정해야 합니다.

로컬 콘텐츠를 참조할 때 ms-appx: 스키마를 사용하여 사용하는 BitmapImage.UriSource절대 URI(Uniform Resource Identifier)에 포함해야 합니다. 코드에서는 원본을 XAML 특성으로 지정하는 경우 자동으로 발생하는 상대 URI(Uniform Resource Identifier) 부분과 ms-appx: 체계를 결합하기 위한 처리 바로 가기를 얻지 못합니다. 대신 적절한 체계를 사용하여 절대 URI(Uniform Resource Identifier)를 명시적으로 구성해야 합니다.

앱 패키지에서 원본을 이미지로 설정하는 방법은 다음과 같습니다.

Image img = new Image();
BitmapImage bitmapImage = new BitmapImage();
Uri uri = new Uri("ms-appx:///Assets/Logo.png");
bitmapImage.UriSource = uri;
img.Source = bitmapImage;

// OR

Image img = new Image();
img.Source = new BitmapImage(new Uri("ms-appx:///Assets/Logo.png"));

Windows::UI::Xaml::Controls::Image img;
Windows::UI::Xaml::Media::Imaging::BitmapImage bitmapImage;
Windows::Foundation::Uri uri{ L"ms-appx:///Assets/LockScreenLogo.png" };
bitmapImage.UriSource(uri);
img.Source(bitmapImage);

// OR

Windows::UI::Xaml::Controls::Image img;
img.Source(Windows::UI::Xaml::Media::Imaging::BitmapImage{ Windows::Foundation::Uri{ L"ms-appx:///Assets/LockScreenLogo.png" } });

auto img = ref new Image();
auto bitmapImage = ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();
auto uri = ref new Windows::Foundation::Uri("ms-appx:///Assets/Logo.png");
bitmapImage->UriSource = uri;
img->Source = bitmapImage;

// OR

auto img = ref new Image();
img->Source = ref new BitmapImage(ref new Windows::Foundation::Uri("ms-appx:///Assets/Logo.png"));

코드에서 컨트롤을 Image 사용하기 전에 컨트롤이 준비되었는지 확인해야 하는 경우 이벤트를 처리 Loaded 하고 이벤트 처리기에서 Source 속성을 설정합니다.

참고

이 FrameworkElement.Loaded 이벤트는 컨트롤이 Image XAML 페이지에 로드될 때 발생합니다. 이 ImageOpened 이벤트는 이미지 파일이 컨트롤에서 Image 열릴 때 발생합니다.

다음은 이벤트에 대한 처리기에서 Image.Source를 설정하는 예제입니다 Loaded . 이 예제 Image 에서 개체는 XAML에서 만들어졌지만 원본 또는 다른 속성 값이 없습니다. 대신 이러한 값은 XAML에서 로드될 때 Image 런타임에 제공됩니다.

<Image Loaded="Image_Loaded"/>

void Image_Loaded(object sender, RoutedEventArgs e)
{
    Image img = sender as Image;
    if (img != null)
    {
        BitmapImage bitmapImage = new BitmapImage();
        img.Width = bitmapImage.DecodePixelWidth = 280;
        bitmapImage.UriSource = new Uri("ms-appx:///Assets/Logo.png");
        img.Source = bitmapImage;
    }
}

void MainPage::Image_Loaded(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& /* e */)
{
    auto img{ sender.as<Windows::UI::Xaml::Controls::Image>() }; // throws if QI fails, so no need for null-check afterwards.
    Windows::UI::Xaml::Media::Imaging::BitmapImage bitmapImage;
    img.Width(280);
    bitmapImage.DecodePixelWidth(280);
    bitmapImage.UriSource(Windows::Foundation::Uri{ L"ms-appx:///Assets/LockScreenLogo.png" });
    img.Source(bitmapImage);
}

void App1::MainPage::Image_Loaded(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
 auto img = dynamic_cast<Image^>(sender);
 if (img != nullptr)
 {
  auto bitmapImage = ref new BitmapImage();
  img->Width = 280; bitmapImage->DecodePixelWidth = 280;
  bitmapImage->UriSource = ref new Uri("ms-appx:///Assets/Logo.png");
  img->Source = bitmapImage;
 }
}

이미지 원본을 ImageOpened 검색하거나 디코딩하는 데 타이밍 문제가 있는 경우 이벤트를 처리할 수 있습니다. 여기서 이미지 원본을 사용할 수 있을 때까지 표시할 대체 콘텐츠가 필요할 수 있습니다. 예제 코드 는 XAML 이미지 샘플을 참조하세요.

코드에서 상대 URI 사용

이전에 XAML 파서가 구문 분석 중인 XAML 페이지의 기본 URI(Uniform Resource Identifier)를 사용하여 상대 URI(Uniform Resource Identifier)를 해석하는 것을 확인했습니다. 코드에서 동일한 결과를 얻으려면 절대 기준과 해당 위치 내의 상대 경로를 결합하여 URI(Uniform Resource Identifier)를 만드는 생성자 중 하나를 사용하여 URI 를 생성할 수 있습니다. 첫 번째 매개 변수의 경우 로드되는 위치를 Image 호출 BaseUri Page 합니다. (원본을 Image 설정하는 인스턴스 또는 페이지의 다른 요소를 호출 BaseUri 할 수도 있습니다. 아래 주의 사항을 참조하세요.) 그러면 ms-appx: 스키마를 사용하여 URI(Uniform Resource Identifier)가 만들어지고 XAML 페이지의 위치에 포함된 경로가 추가됩니다. 두 번째 매개 변수의 경우 원본 이미지 위치를 설명하는 상대 URI(Uniform Resource Identifier) 문자열을 전달합니다.

C# 또는 Microsoft Visual Basic에서 Uri 형식은 System.Uri로 프로젝션되므로 문자열을 두 번째 매개 변수로 사용하는 System.Uri(Uri, String) 생성자를 사용합니다. Visual C++ 구성 요소 확장(C++/CX)에서는 을 사용합니다 Uri(String,String).

<Image x:Name="capturedPhoto"/>

BitmapImage bitmapImage = new BitmapImage();
// Call BaseUri on the root Page element and combine it with a relative path
// to consruct an absolute URI.
bitmapImage.UriSource = new Uri(this.BaseUri, "Assets/placeholder.png");
capturedPhoto.Source = bitmapImage;

auto bitmapImage = winrt::Windows::UI::Xaml::Media::Imaging::BitmapImage();
// Call BaseUri on the root Page element and combine it with a relative path
// to consruct an absolute URI.
bitmapImage.UriSource(winrt::Windows::Foundation::Uri(BaseUri().AbsoluteUri(), L"Assets/placeholder.png"));
capturedPhoto.Source(bitmapImage);

auto bitmapImage = ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();
// Call BaseUri on the root Page element and combine it with a relative path
// to consruct an absolute URI.
bitmapImage->UriSource = ref new Windows::Foundation::Uri(BaseUri->AbsoluteUri, "Assets/placeholder.png");
capturedPhoto->Source = bitmapImage;

참고

코드 BaseUri 에서 새 Image 인스턴스화 하는 경우 속성은 페이지의 시각적 트리에 추가 될 때까지 Image null 입니다. 예를 들어 다음 코드는 ArgumentNull 예외를 throw합니다. 예외를 방지하려면 Source 속성을 설정하기 전에 시각적 트리에 추가 Image 합니다.

다음은 페이지에 추가되기 전에 호출 BaseUri Image 하기 때문에 예외를 Image throw하는 예제입니다. 'stackPanel1'은 StackPanel XAML에서 선언된 요소라고 가정합니다.

Image img = new Image();
BitmapImage bitmapImage = new BitmapImage();

// AN EXCEPTION IS THROWN BECAUSE img.BaseUri IS NULL AT THIS POINT.
Uri uri = new Uri(img.BaseUri, "Assets/Logo.png");

bitmapImage.UriSource = uri;
img.Source = bitmapImage;
stackPanel1.Children.Add(img);

Image img;
BitmapImage bitmapImage;

// AN EXCEPTION IS THROWN BECAUSE img.BaseUri IS NULL AT THIS POINT.
Uri uri(img.BaseUri(), L"Assets/Logo.png");

bitmapImage.UriSource(uri);
img.Source(bitmapImage);
stackPanel1.Children().Add(img);

auto img = ref new Image();
auto bitmapImage = ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();

// AN EXCEPTION IS THROWN BECAUSE img->BaseUri IS NULL AT THIS POINT.
auto uri = ref new Windows::Foundation::Uri(img->BaseUri->AbsoluteUri, "Assets/Logo.png");

bitmapImage->UriSource = uri;
img->Source = bitmapImage;
stackPanel1->Children->Append(img);

이 오류를 방지하려면 앞에서 설명한 대로 자신을 호출 BaseUri Page 하거나 여기에 표시된 대로 호출BaseUri하기 전에 페이지에 추가할 Image 수 있습니다.

이 예제에서는 Image 호출 BaseUri전에 페이지에 추가되므로 BaseUri null 이 아닙니다. 'stackPanel1'은 StackPanel XAML에서 선언된 요소라고 가정합니다.

Image img = new Image();
// Add the image to the page.
stackPanel1.Children.Add(img);

BitmapImage bitmapImage = new BitmapImage();
// img.BaseUri in not null because img has been added to the page.
Uri uri = new Uri(img.BaseUri, "Assets/Logo.png");
bitmapImage.UriSource = uri;
img.Source = bitmapImage;

Image img;
// Add the image to the page.
stackPanel1.Children().Add(img);

BitmapImage bitmapImage;
// img.BaseUri in not null because img has been added to the page.
Uri uri(img.BaseUri(), L"Assets/Logo.png");
bitmapImage.UriSource(uri);
img.Source(bitmapImage);

auto img = ref new Image();
// Add the image to the page.
stackPanel1->Children->Append(img);

auto bitmapImage = ref new Windows::UI::Xaml::Media::Imaging::BitmapImage();
// img->BaseUri in not null because img has been added to the page.
auto uri = ref new Windows::Foundation::Uri(img->BaseUri->AbsoluteUri, "Assets/Logo.png");
bitmapImage->UriSource = uri;
img->Source = bitmapImage;

네트워크에서 파일 사용

네트워크 위치의 파일을 이미지 원본으로 사용하려면 다음과 같이 http: 또는 https: 체계를 사용합니다. 절대 URI(Uniform Resource Identifier)를 지정합니다. 자세한 내용은 파일 리소스를 로드하는 방법을 참조하세요.

<Image Source="http://www.contoso.com/images/logo.png"/>

Image img = new Image();
img.Source = new BitmapImage(new Uri("http://www.contoso.com/images/logo.png"));

Image img;
img.Source(BitmapImage(Uri(L"http://www.contoso.com/images/logo.png")));

auto img = ref new Image();
img->Source = ref new BitmapImage(ref new Windows::Foundation::Uri("http://www.contoso.com/images/logo.png"));

로컬 스토리지의 파일 사용

앱의 로컬 스토리지에 이미지 원본으로 배치된 파일을 사용하려면 다음과 같이 ms-appdata: 체계를 사용합니다. 절대 URI(Uniform Resource Identifier)를 지정합니다. 자세한 내용은 파일 리소스를 로드하는 방법을 참조하세요.

<!-- Access an image file stored in the local folder -->
<Image Source="ms-appdata:///local/images/logo.png"/>

<!-- Access an image file stored in the roaming folder -->
<Image Source="ms-appdata:///roaming/images/logo.png"/>

<!-- Access an image file stored in the temp folder -->
<Image Source="ms-appdata:///temp/images/logo.png"/>

var uri = new System.Uri("ms-appdata:///local/images/logo.png");
var file = await Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(uri);

Image img = new Image();
img.Source = file;