Power Apps의 이미지 컨트롤

로컬 파일이나 데이터 원본 등으로부터 이미지를 표시하는 컨트롤입니다.

설명

앱에 하나 이상의 이미지 컨트롤을 추가할 경우 데이터 집합에 속하지 않은 개별 이미지를 표시하거나 데이터 웝노의 레코드에서 이미지를 통합할 수 있습니다.

키 속성

이미지 – 이미지, 오디오 또는 마이크 컨트롤에 표시되는 이미지의 URL 또는 이름입니다.

참고

  • 모든 외부 이미지에 HTTPS를 사용하여 최신 브라우저와의 호환성을 보장합니다.
  • 외부 이미지는 인증 없이 익명으로 액세스할 수 있어야 합니다.

추가 속성

AccessibleLabel – 화면 읽기 프로그램의 레이블입니다.

ApplyEXIFOrientation – 이미지에 포함된 EXIF 데이터에 지정된 방향을 자동으로 적용할지 여부입니다.

AutoDisableOnSelect – OnSelect 동작이 실행되는 동안 컨트롤을 자동으로 비활성화합니다.

BorderColor – 컨트롤의 테두리 색입니다.

BorderStyle – 컨트롤의 테두리는 Solid, Dashed, Dotted, None입니다.

BorderThickness – 컨트롤의 테두리 굵기입니다.

CalculateOriginalDimensionsOriginalHeightOriginalWidth 속성을 사용하도록 설정합니다.

DisplayMode – 컨트롤이 사용자 입력을 허용(편집)하거나, 데이터만 표시(보기)하거나 사용 안 하도록(사용 안 함) 설정할지 선택합니다.

DisabledBorderColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 테두리 색입니다.

DisabledFill – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 배경색입니다.

Fill – 컨트롤의 배경색입니다.

FlipHorizontal – 이미지를 표시하기 전에 이미지를 좌우 대칭 이동할지 여부입니다.

FlipVertical – 이미지를 표시하기 전에 이미지를 상하 대칭 이동할지 여부입니다.

FocusedBorderColor – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 색입니다.

FocusedBorderThickness – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 두께입니다.

Height – 컨트롤의 위쪽 및 아래쪽 가장자리 사이의 간격입니다.

HoverBorderColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 테두리 색입니다.

HoverFill – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 배경색입니다.

ImagePosition – 이미지와 같은 크기가 아닐 경우 컨트롤 또는 화면의 이미지 위치입니다(채우기, 맞춤, 맞춤, 타일, 가운데).

ImageRotation – 이미지를 표시하기 전에 회전시키는 방법입니다. 값은 없음, 시계 방향(CW) 90도, 시계 반대 방향(CCW) 90도 및 시계 방향 180도로 설정할 수 있습니다.

OnSelect – 사용자가 컨트롤을 탭하거나 클릭할 때 수행할 작업입니다.

OriginalHeightCalculateOriginalDimensions 속성으로 활성화된 이미지의 원래 높이입니다.

OriginalWidthCalculateOriginalDimensions 속성으로 활성화된 이미지의 원래 너비입니다.

PaddingBottom – 컨트롤의 텍스트와 해당 컨트롤의 하단 가장자리 사이의 거리입니다.

PaddingLeft – 컨트롤의 텍스트와 해당 컨트롤의 왼쪽 가장자리 사이의 거리입니다.

PaddingRight – 컨트롤의 텍스트와 해당 컨트롤의 오른쪽 가장자리 사이의 거리입니다.

PaddingTop – 컨트롤의 텍스트와 해당 컨트롤의 상단 가장자리 사이의 거리입니다.

PressedBorderColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 테두리 색입니다.

PressedFill – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 배경색입니다.

RadiusBottomLeft – 컨트롤 왼쪽 아래 모서리의 둥근 정도입니다.

RadiusBottomRight – 컨트롤 오른쪽 아래 모서리의 둥근 정도입니다.

RadiusTopLeft – 컨트롤 왼쪽 위 모서리의 둥근 정도입니다.

RadiusTopRight – 컨트롤 오른쪽 위 모서리의 둥근 정도입니다.

TabIndex – 다른 컨트롤에 관련된 키보드 탐색 순서입니다.

Tooltip – 사용자가 컨트롤을 마우스로 가리킬 때 나타나는 설명 텍스트입니다.

Transparency – 이미지 뒤의 컨트롤을 그대로 표시하는 수준입니다. 10 진수 값의 범위는 0에서 1입니다. 0이 불투명하면 0.5는 반투명이고 1은 투명합니다.

Visible – 컨트롤을 표시하거나 숨길지 여부를 선택합니다.

Width – 컨트롤의 왼쪽 및 오른쪽 가장자리 사이의 간격입니다.

X – 컨트롤의 왼쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우는 화면)의 왼쪽 가장자리 사이의 거리입니다.

Y – 컨트롤의 상단 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우는 화면)의 상단 가장자리 사이의 거리입니다.

Remove( DataSource, ThisItem )

예제

로컬 파일에서 이미지 표시

  1. 파일 메뉴에서 미디어를 클릭하거나 탭한 다음, 찾아보기를 클릭하거나 탭합니다.

  2. 추가할 이미지 파일을 클릭하거나 터치하고, 열기를 클릭하거나 터치한 다음 기본 작업 영역으로 돌아가려면 Esc를 누릅니다.

  3. 이미지 컨트롤을 추가하고 이미지 속성을 추가한 파일의 이름으로 설정합니다.

    컨트롤을 추가하고 구성하는 방법을 모르시나요?

    이미지 컨트롤은 사용자가 지정한 이미지를 보여 줍니다.

데이터 원본에서 이미지 집합 표시

  1. Excel 파일을 다운로드하고 로컬 디바이스에 저장합니다.

  2. Power Apps Studio에서 앱을 만들거나 연 다음 오른쪽 창에서 데이터 원본 추가를 클릭하거나 터치합니다.

    데이터 원본 추가가 오른쪽 창에 표시되지 않으면 왼쪽 탐색 표시줄에서 화면을 클릭하거나 터치합니다.

  3. 앱에 정적 데이터 추가를 클릭하거나 탭하고, 다운로드한 Excel 파일을 클릭하거나 탭한 다음 열기를 클릭하거나 탭합니다.

  4. FlooringEstimates 확인란을 선택한 다음 연결을 클릭하거나 터치합니다.

  5. 이미지가 있는 갤러리 컨트롤을 추가하고 Items 속성을 FlooringEstimates로 설정합니다.

    컨트롤을 추가하고 구성하는 방법을 모르시나요?

    갤러리 컨트롤은 다운로드한 Exccel 파일의 링크를 기준으로 카페트, 하드우드에어 및 타일 제품의 이미지를 보여 줍니다.

접근성 지침

색 대비

  • 그래픽이 단추로 사용되는 경우 표준 색 대비 요구 사항이 적용됩니다.
  • 장식용으로만 사용되지 않는 경우 이미지 내에서 대비 문제를 확인하는 것이 좋습니다.

스크린 리더 지원

  • 중요한 그래픽은 AccessibleLabel 을 설정해야 합니다.

  • 그래픽이 장식용이거나 중복 정보를 제공하는 경우 AccessibleLabel 비워두거나 빈 문자열 "" 으로 설정합니다. 화면 판독기는 이러한 그래픽을 무시합니다.

예를 들어, 레이블 옆에 이 양식을 수정할 수 없다는 자물쇠 이미지 배치할 수 있습니다. 레이블이 이미 의미를 설명하고 있기 때문에 이미지에 대한 AccessibleLabel 이 필요하지 않습니다.

중요

TabIndex 이 0 이상이면, Image 버튼이 됩니다. 모양은 변경되지 않지만, 화면 판독기는 이를 버튼으로 처리합니다. AccessibleLabel이 비어 있어도 컨트롤을 무시하지 않습니다.

키보드 지원

  • 그래픽이 단추로 사용되는 경우 TabIndex 는 0 이상이어야 합니다. 그러면 키보드 사용자가 해당 위치로 이동할 수 있습니다.

  • 그래픽이 단추로 사용되는 경우 포커스 표시기는 명확하게 표시되어야 합니다. FocusedBorderColorFocusedBorderThickness 를 사용하여 이를 달성합니다.

참고

귀사의 설명서 언어 기본 설정에 대해 말씀해 주시겠습니까? 간단한 설문 조사에 응해주세요. (이 설문 조사는 영어로 되어 있습니다.)

이 설문 조사는 약 7분 정도 걸립니다. 개인 데이터는 수집되지 않습니다(개인정보처리방침).