PowerApps의 이미지 컨트롤Image control in PowerApps

로컬 파일이나 데이터 원본 등으로부터 이미지를 표시하는 컨트롤입니다.A control that shows an image from, for example, a local file or a data source.

설명Description

앱에 하나 이상의 이미지 컨트롤을 추가할 경우 데이터 집합에 속하지 않은 개별 이미지를 표시하거나 데이터 웝노의 레코드에서 이미지를 통합할 수 있습니다.If you add one or more Image controls to your app, you can show individual images that aren't part of a data set, or you can incorporate images from records in data sources.

주요 속성Key properties

Image – 이미지, 오디오 또는 마이크 컨트롤에 표시되는 이미지의 이름입니다.Image – The name of the image that appears in an image, audio, or microphone control.

추가 속성Additional properties

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

ApplyEXIFOrientation – 이미지에 포함된 EXIF 데이터에 지정된 방향을 자동으로 적용할지 여부입니다.ApplyEXIFOrientation – Whether to automatically apply the orientation specified in the EXIF data embedded with the image.

AutoDisableOnSelect – OnSelect 동작이 실행되는 동안 컨트롤을 자동으로 비활성화합니다.AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is executing.

BorderColor - 컨트롤의 테두리 색입니다.BorderColor – The color of a control's border.

BorderStyle - 컨트롤의 테두리는 Solid, Dashed, Dotted, None입니다.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness - 컨트롤의 테두리 굵기입니다.BorderThickness – The thickness of a control's border.

CalculateOriginalDimensionsOriginalHeightOriginalWidth 속성을 사용하도록 설정합니다.CalculateOriginalDimensions – Enables the OriginalHeight and OriginalWidth properties.

DisplayMode – 컨트롤이 사용자 입력을 허용(편집)하거나, 데이터만 표시(보기)하거나 사용 안 하도록(사용 안 함) 설정할지 선택합니다.DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 테두리 색입니다.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledFill – 컨트롤의 DisplayMode 속성이 Disabled로 설정된 경우 컨트롤의 배경색입니다.DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill - 컨트롤의 배경색입니다.Fill – The background color of a control.

FlipHorizontal – 이미지를 표시하기 전에 이미지를 좌우 대칭 이동할지 여부입니다.FlipHorizontal – Whether to flip the image horizontally before displaying it.

FlipVertical – 이미지를 표시하기 전에 이미지를 상하 대칭 이동할지 여부입니다.FlipVertical – Whether to flip the image vertically before displaying it.

FocusedBorderColor – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 색입니다.FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 두께입니다.FocusedBorderThickness – The thickness of a control's border when the control is focused.

Height – 컨트롤의 위쪽 및 아래쪽 가장자리 사이의 간격입니다.Height – The distance between a control's top and bottom edges.

HoverBorderColor – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 테두리 색입니다.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverFill – 사용자가 해당 컨트롤에 마우스 포인터를 올려두는 경우 컨트롤의 배경색입니다.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

ImagePosition – 이미지와 같은 크기가 아닌 경우 컨트롤 또는 화면에 있는 이미지의 위치입니다(채우기, 맞춤, 늘이기, 타일 또는 가운데).ImagePosition – The position (Fill, Fit, Stretch, Tile, or Center) of an image in a screen or a control if it isn't the same size as the image.

ImageRotation – 이미지를 표시하기 전에 회전시키는 방법입니다.ImageRotation – How to rotate the image before displaying it. 값은 없음, 시계 방향(CW) 90도, 시계 반대 방향(CCW) 90도 및 시계 방향 180도로 설정할 수 있습니다.Values can be none, clockwise (CW) 90 degrees, counter-clockwise (CCW) 90 degrees and clockwise 180 degrees.

OnSelect – 사용자가 앱을 클릭하거나 탭할 때 앱이 응답하는 방법입니다.OnSelect – How the app responds when the user taps or clicks a control.

OriginalHeightCalculateOriginalDimensions 속성으로 활성화된 이미지의 원래 높입니다.OriginalHeight – Original height of an image, enabled with the CalculateOriginalDimensions property.

OriginalWidthCalculateOriginalDimensions 속성으로 활성화된 이미지의 원래 높입니다.OriginalWidth – Original width of an image, enabled with the CalculateOriginalDimensions property.

PaddingBottom – 컨트롤의 텍스트와 해당 컨트롤의 하단 가장자리 사이의 거리입니다.PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – 컨트롤의 텍스트와 해당 컨트롤의 왼쪽 가장자리 사이의 거리입니다.PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – 컨트롤의 텍스트와 해당 컨트롤의 오른쪽 가장자리 사이의 거리입니다.PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – 컨트롤의 텍스트와 해당 컨트롤의 위쪽 가장자리 사이의 거리입니다.PaddingTop – The distance between text in a control and the top edge of that control.

PressedBorderColor – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 테두리 색입니다.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedFill – 사용자가 컨트롤을 탭하거나 클릭하는 경우 컨트롤의 배경색입니다.PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft – 컨트롤 왼쪽 아래 모서리의 둥근 정도입니다.RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight – 컨트롤 오른쪽 아래 모서리의 둥근 정도입니다.RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft – 컨트롤 왼쪽 위 모서리의 둥근 정도입니다.RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight – 컨트롤 오른쪽 위 모서리의 둥근 정도입니다.RadiusTopRight – The degree to which the top-right corner of a control is rounded.

TabIndex – 다른 컨트롤에 관련된 키보드 탐색 순서입니다.TabIndex – Keyboard navigation order in relation to other controls.

Tooltip – 사용자가 마우스로 컨트롤을 가리킬 때 표시되는 설명 텍스트입니다.Tooltip – Explanatory text that appears when the user hovers over a control.

Transparency –이미지 뒤의 컨트롤을 그대로 표시하는 수준입니다.Transparency – The degree to which controls behind an image remain visible.

Visible – 컨트롤을 표시하거나 숨길지 여부를 선택합니다.Visible – Whether a control appears or is hidden.

Width – 컨트롤의 왼쪽 및 오른쪽 가장자리 사이의 간격입니다.Width – The distance between a control's left and right edges.

X – 컨트롤의 왼쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 왼쪽 가장자리 사이의 거리입니다.X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – 컨트롤의 위쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 위쪽 가장자리 사이의 거리입니다.Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Remove( DataSource, ThisItem )Remove( DataSource, ThisItem )

Examples

로컬 파일에서 이미지 표시Show an image from a local file

  1. 파일 메뉴에서 미디어를 클릭하거나 탭한 다음, 찾아보기를 클릭하거나 탭합니다.On the File menu, click or tap Media, and then click or tap Browse.

  2. 추가할 이미지 파일을 클릭하거나 터치하고, 열기를 클릭하거나 터치한 다음, 기본 작업 영역으로 돌아가려면 Esc 키를 누릅니다.Click or tap the image file that you want to add, click or tap Open, and then press Esc to return to the default workspace.

  3. 이미지 컨트롤을 추가하고 이미지 속성을 추가한 파일의 이름으로 설정합니다.Add an Image control, and set its Image property to the name of the file that you added.

    컨트롤을 추가하고 구성하는 방법을 모르시나요?Don't know how to add and configure a control?

    이미지 컨트롤은 사용자가 지정한 이미지를 보여 줍니다.The Image control shows the image that you specified.

데이터 원본에서 이미지 집합 표시Show a set of images from a data source

  1. Excel 파일을 다운로드하고 로컬 장치에 저장합니다.Download this Excel file, and save it on your local device.

  2. PowerApps Studio에서 앱을 만들거나 연 다음 오른쪽 창에서 데이터 원본 추가를 클릭하거나 터치합니다.In PowerApps Studio, create or open an app, and then click or tap Add data source in the right-hand pane.

    데이터 원본 추가가 오른쪽 창에 표시되지 않으면 왼쪽 탐색 표시줄에서 화면을 클릭하거나 터치합니다.If Add data source doesn't appear in the right-hand pane, click or tap a screen in the left navigation bar.

  3. 앱에 정적 데이터 추가를 클릭하거나 탭하고, 다운로드한 Excel 파일을 클릭하거나 탭한 다음 열기를 클릭하거나 탭합니다.Click or tap Add static data to your app, click or tap the Excel file that you downloaded, and then click or tap Open.

  4. 바닥 예상치 확인란을 선택한 다음 연결을 클릭하거나 터치합니다.Select the Flooring Estimates check box, and then click or tap Connect.

  5. 이미지가 있는 갤러리 컨트롤을 추가하고 그 Items 속성을 FlooringEstimates로 설정합니다.Add a Gallery control with images, and set its Items property to FlooringEstimates.

    컨트롤을 추가하고 구성하는 방법을 모르시나요?Don't know how to add and configure a control?

    갤러리 컨트롤은 다운로드한 Exccel 파일의 링크를 기준으로 카페트, 하드우드에어 및 타일 제품의 이미지를 보여줍니다.The Gallery control shows images of carpet, hardwood, and tile products based on links in the Excel file that you downloaded.

접근성 지침Accessibility guidelines

색 대비Color contrast

  • 그래픽이 단추로 사용되는 경우 표준 색 대비 요구 사항이 적용됩니다.Standard color contrast requirements apply, if the graphic is used as a button.
  • 장식용으로만 사용되지 않는 경우 이미지 내에서 대비 문제를 확인하는 것이 좋습니다.Consider checking for contrast issues within the image, if it is not purely decorative.

화면 판독기 지원Screen reader support

  • 그래픽이 단추로 사용되거나 장식용으로만 사용되지 않는 경우에는 AccessibleLabel 이 있어야 합니다.AccessibleLabel must be present, if the graphic is used as a button or is otherwise not just for decoration.
  • 그래픽이 장식용으로만 사용되는 경우 AccessibleLabel 은 비어 있거나 빈 문자열 "" 이어야 합니다.AccessibleLabel must be empty or the empty string "", if the graphic is purely for decoration. 이렇게 하면 화면 읽기 프로그램이 그래픽을 무시합니다.This causes screen readers to ignore the graphic.
  • 그래픽이 중복 정보를 제공하는 경우 AccessibleLabel 은 비어 있거나 빈 문자열 "" 일 수 있습니다.AccessibleLabel can be empty or the empty string "", if the graphic provides redundant information.
    • 예를 들어 AccessibleLabel설정으로 설정된 기어의 이미지가 있습니다.For example, an Image of gears with its AccessibleLabel set to Settings. 이 이미지는 단추로 사용되지 않습니다.This image is not used as a button. 설정으로도 표시된 레이블 옆에 있습니다.It is next to a Label that also says Settings. 화면 읽기 프로그램은 이미지를 설정으로 읽고 레이블을 다시 설정으로 읽습니다.Screen readers will read the image as Settings, and the label as Settings again. 이는 불필요하게 자세한 정보입니다.This is unnecessarily verbose. 이 경우 이미지에는 AccessibleLabel 이 필요하지 않습니다.In this case, the Image does not need an AccessibleLabel.

      중요

      화면 읽기 프로그램은 AccessibleLabel 이 비어 있는 경우에도 항상 0 이상의 TabIndex 가 있는 이미지를 읽습니다.Screen readers will always read Images that have TabIndex of zero or greater, even if AccessibleLabel is empty. 이는 이미지가 단추로 렌더링되기 때문입니다.This is because they are rendered as buttons. AccessibleLabel 이 제공되지 않으면 화면 읽기 프로그램은 그래픽을 단추로만 읽습니다.If no AccessibleLabel is provided, screen readers will simply read the graphic as button.

키보드 지원Keyboard support

  • 그래픽이 단추로 사용되는 경우 TabIndex 는 0 이상이어야 합니다.TabIndex must be zero or greater, if the graphic is used as a button. 이 경우 키보드 사용자가 이미지로 이동할 수 있습니다.This allows keyboard users to navigate to it.

  • 그래픽이 단추로 사용되는 경우 포커스 표시기는 명확하게 표시되어야 합니다.Focus indicators must be clearly visible, if the graphic is used as a button. FocusedBorderColorFocusedBorderThickness 를 사용하여 이를 달성합니다.Use FocusedBorderColor and FocusedBorderThickness to achieve this.

    참고

    TabIndex 가 0 이상이면 이미지가 단추로 렌더링됩니다.When TabIndex is zero or greater, the Image is rendered as a button. 시각적 모양은 변경되지 않지만 화면 읽기 프로그램은 이미지를 단추로 올바르게 식별합니다.There is no change to the visual appearance, but screen readers will correctly identify the image as a button. TabIndex 가 0보다 작으면 이미지가 이미지로 식별됩니다.When TabIndex is less than zero, the Image is identified as an image.