SImage `<s-image>`

가로세로 비율, 맞춤 방식, 테두리, 지연 로딩을 제어하며 이미지를 표시합니다. SImage은(는) Shopify Polaris <s-image> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

import { SImage } from 'polaris-vue-elements'

모범 사례

선명하고 최적화된 이미지를 사용하세요. 해상도가 높으면서도 웹에 맞게 최적화된 이미지를 고릅니다.
목적이 있을 때 이미지를 추가하세요. 콘텐츠를 더 명확하게 하거나 판매자를 안내하는 데 도움이 될 때만 이미지를 넣습니다.

전체 가이드는 <s-image>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

아래 이미지는 서드파티 플레이스홀더 이미지 서비스인 picsum.photos에서 불러오며, 데모용으로만 사용됩니다.

vue

<script setup>
import { SImage } from 'polaris-vue-elements'
</script>

<template>
  <SImage
    src="https://picsum.photos/seed/polaris-image/400/300"
    alt="Placeholder scenic photo"
    aspectRatio="4/3"
    inlineSize="fill"
    objectFit="cover"
    borderRadius="200"
    style="width: 220px"
  />
</template>

Props

Prop	타입	설명
`accessibilityRole`	`"presentation" \| "none" \| "img"`	컴포넌트 콘텐츠의 시맨틱 의미입니다. 설정하면 보조 기술이 이 role을 사용해 사용자의 페이지 탐색을 돕습니다. - `none`: 요소와 그 콘텐츠를 보조 기술로부터 완전히 숨깁니다 - `presentation`: 시맨틱 의미를 제거하여 이미지를 순수한 장식용으로 만들고 스크린 리더가 무시하게 합니다. - `img`: 사용자에게 의미 있는 정보를 전달하는 이미지로 요소를 식별합니다.
`alt`	`string`	이미지가 무엇에 관한 것인지 이해할 수 있도록 이미지를 설명하는 대체 텍스트입니다. 보조 기술 사용자와 비장애 사용자 모두에게 매우 유용합니다. 잘 작성된 설명은 시각 장애가 있는 사람도 텍스트가 아닌 콘텐츠를 이용할 수 있게 해 줍니다. 스크린 리더가 `s-image`를 만나면 이 설명을 소리 내어 읽습니다. 연결 상태가 좋지 않은 등의 이유로 이미지를 불러오지 못하면 대신 `alt`가 화면에 표시됩니다. 덕분에 화면을 보는 구매자도 이곳에 이미지가 표시될 예정이었음을 알 수 있고, 대신 텍스트 콘텐츠를 이용할 수 있습니다. 자세한 내용은 대체 텍스트 작성 시 고려 사항을 참고하세요.
`aspectRatio`	${number}` \| `${number}/${number}` \| `${number}/ ${number}` \| `${number} /${number}` \| `${number} / ${number}	이미지의 종횡비입니다. 이미지의 렌더링은 `inlineSize` 값에 따라 달라집니다. - `inlineSize="fill"`: 종횡비가 유지되며 이미지가 필요한 공간을 차지합니다. - `inlineSize="auto"`: 이미지가 로드될 때까지 렌더링되지 않으며 종횡비는 무시됩니다. 예를 들어 값을 `50 / 100`으로 설정하면 getter는 `50 / 100`을 반환합니다. 값을 `0.5`로 설정하면 getter는 `0.5 / 1`을 반환합니다. aspect-ratio 속성에 대해 자세히 알아보세요.
`border`	`BorderShorthand`	단축 구문을 사용해 너비, 색상, 스타일을 하나의 속성으로 지정하는 테두리입니다.
`borderColor`	`"subdued" \| "base" \| "strong"`	디자인 시스템의 색상 스케일을 사용하는 테두리 색상입니다. 설정하면 `border` 속성에 지정된 색상 값보다 우선합니다. 필요한 시각적 강조에 맞게 `subdued`, `base`, `strong` 중에서 선택하세요.
`borderRadius`	`MaybeAllValuesShorthandProperty<BoxBorderRadii>`	디자인 시스템의 반경 스케일을 사용한 요소 모서리의 둥근 정도입니다. 모서리마다 다른 반경을 지정할 수 있도록 1~4개 값 구문을 지원합니다. 둥근 모서리나 완전히 둥근 요소를 만들 때 사용합니다.
`borderStyle`	`"" \| MaybeAllValuesShorthandProperty<BoxBorderStyles>`	실선, 파선, 점선 등 모든 면의 테두리 시각적 스타일입니다. 설정하면 `border` 속성에 지정된 스타일 값을 재정의합니다. 면마다 다른 스타일을 지정할 수 있도록 1~4개 값 구문을 지원합니다.
`borderWidth`	`"" \| MaybeAllValuesShorthandProperty<"base" \| "small-100" \| "small" \| "large" \| "large-100" \| "none">`	모든 면의 테두리 두께입니다. 설정하면 `border` 속성에 지정된 너비 값을 재정의합니다. 면마다 다른 너비를 지정할 수 있도록 1~4개 값 구문을 지원합니다.
`inlineSize`	`"auto" \| "fill"`	이미지의 표시 인라인 너비입니다. - `fill`: 이미지가 사용 가능한 인라인 크기의 100%를 차지합니다. - `auto`: 이미지가 원래 크기로 표시됩니다. width 속성에 대해 자세히 알아보세요.
`loading`	`"eager" \| "lazy"`	이미지 로딩 전략입니다. - `eager`: 보이는 뷰포트 내 위치와 관계없이 이미지를 즉시 로드합니다. - `lazy`: 이미지가 뷰포트로부터 지정된 거리에 가까워질 때까지 로딩을 지연합니다. loading 속성에 대해 자세히 알아보세요.
`objectFit`	`"contain" \| "cover"`	컨테이너 안에 맞추기 위한 이미지 크기 조정 방식입니다. - `contain`: 가로세로 비율을 유지하면서 이미지가 컨테이너 안에 들어가도록 크기를 조정합니다. 이미지 전체가 보이지만 빈 공간이 생길 수 있습니다. - `cover`: 가로세로 비율을 유지하면서 이미지가 컨테이너 전체를 채우도록 크기를 조정합니다. 맞추기 위해 이미지가 잘릴 수 있습니다. 이미지는 항상 컨테이너 중앙에 배치됩니다. object-fit 속성에 대해 자세히 알아보세요.
`sizes`	`string`	미디어 조건과 그에 대응하는 크기의 집합입니다.
`src`	`string`	이미지 소스(원격 URL 또는 로컬 파일 리소스)입니다. 이미지가 로드 중이거나 `src`가 제공되지 않으면 플레이스홀더가 렌더링됩니다.
`srcSet`	`string`	이미지 소스와 각 소스의 너비 또는 픽셀 밀도 디스크립터의 집합입니다. `src` 속성보다 우선합니다.

Events

Event	타입
`error`	`CustomEvent`
`load`	`CustomEvent`

<SImage>에서 @error 형식의 리스너로 이 events를 수신하세요.

SImage <s-image> ​

모범 사례 ​

예시 ​

Props ​

Events ​

SImage `<s-image>`

모범 사례

예시

Props

Events