SImage <s-image>
Hiển thị hình ảnh, kiểm soát được tỉ lệ khung hình, cách co giãn, viền và lazy loading. SImage là Vue 3 wrapper có type cho web component <s-image> của Shopify Polaris.
ts
import { SImage } from 'polaris-vue-elements'Best practices
- Dùng hình ảnh sắc nét, đã tối ưu. Chọn hình ảnh độ phân giải cao nhưng cũng đã được tối ưu cho web.
- Thêm hình ảnh có mục đích. Chỉ đưa vào hình ảnh khi nó làm nội dung rõ ràng hơn hoặc giúp hướng dẫn người bán.
Xem best practices của Shopify cho <s-image> (tiếng Anh) để có hướng dẫn đầy đủ.
Ví dụ
Ảnh bên dưới được tải từ picsum.photos, một dịch vụ ảnh mẫu của bên thứ ba, chỉ nhằm mục đích minh họa.
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 | Kiểu | Mô tả |
|---|---|---|
accessibilityRole | "presentation" | "none" | "img" | Ý nghĩa ngữ nghĩa của nội dung component. Khi được đặt, role sẽ được công nghệ hỗ trợ dùng để giúp người dùng điều hướng trang. - none: Ẩn hoàn toàn phần tử và nội dung của nó khỏi công nghệ hỗ trợ - presentation: Loại bỏ ý nghĩa ngữ nghĩa, khiến hình ảnh chỉ mang tính trang trí và bị trình đọc màn hình bỏ qua. - img: Xác định phần tử là hình ảnh truyền tải thông tin có ý nghĩa tới người dùng. |
alt | string | Mô tả bằng văn bản thay thế cho hình ảnh để người đọc hiểu hình ảnh nói về điều gì. Điều này cực kỳ hữu ích cho cả người dùng công nghệ hỗ trợ lẫn người dùng nhìn thấy được. Một mô tả được viết tốt giúp người khiếm thị có thể tham gia tiếp nhận nội dung phi văn bản. Khi trình đọc màn hình gặp một s-image, mô tả sẽ được đọc to lên. Nếu hình ảnh không tải được, có thể do kết nối kém, alt sẽ được hiển thị trên màn hình thay thế. Điều này có lợi ở chỗ cho người mua nhìn thấy được biết rằng lẽ ra có một hình ảnh được tải ở đây, và thay vào đó họ vẫn có thể tiếp nhận nội dung văn bản. Đọc những lưu ý khi viết văn bản thay thế để tìm hiểu thêm. |
aspectRatio | ${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number} | Tỷ lệ khung hình của ảnh. Cách render ảnh phụ thuộc vào giá trị inlineSize: - inlineSize="fill": tỷ lệ khung hình được tôn trọng và ảnh sẽ chiếm khoảng không gian cần thiết. - inlineSize="auto": ảnh sẽ không render cho đến khi tải xong và tỷ lệ khung hình sẽ bị bỏ qua. Ví dụ, nếu giá trị được đặt là 50 / 100, getter trả về 50 / 100. Nếu giá trị được đặt là 0.5, getter trả về 0.5 / 1. Tìm hiểu thêm về thuộc tính aspect-ratio. |
border | BorderShorthand | Đường viền được áp dụng bằng cú pháp viết tắt để chỉ định độ rộng, màu sắc và kiểu trong một thuộc tính duy nhất. |
borderColor | "subdued" | "base" | "strong" | Màu của viền, dùng thang màu của design system. Khi được đặt, giá trị này ghi đè giá trị màu chỉ định trong thuộc tính border. Chọn subdued, base hoặc strong để phù hợp với mức nhấn mạnh thị giác cần thiết. |
borderRadius | MaybeAllValuesShorthandProperty<BoxBorderRadii> | Độ bo tròn các góc của phần tử theo thang bán kính của design system. Hỗ trợ cú pháp 1 đến 4 giá trị để chỉ định bán kính khác nhau cho từng góc. Dùng để tạo các góc bo tròn hoặc phần tử bo tròn hoàn toàn. |
borderStyle | "" | MaybeAllValuesShorthandProperty<BoxBorderStyles> | Kiểu trực quan của đường viền ở tất cả các cạnh, chẳng hạn solid, dashed hoặc dotted. Khi được đặt, giá trị này ghi đè giá trị kiểu được chỉ định trong thuộc tính border. Hỗ trợ cú pháp 1 đến 4 giá trị để chỉ định kiểu khác nhau cho từng cạnh. |
borderWidth | "" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none"> | Độ dày của đường viền ở tất cả các cạnh. Khi được đặt, giá trị này ghi đè giá trị độ rộng được chỉ định trong thuộc tính border. Hỗ trợ cú pháp 1 đến 4 giá trị để chỉ định độ rộng khác nhau cho từng cạnh. |
inlineSize | "auto" | "fill" | Chiều rộng inline hiển thị của ảnh. - fill: ảnh sẽ chiếm 100% kích thước inline khả dụng. - auto: ảnh sẽ được hiển thị ở kích thước tự nhiên. Tìm hiểu thêm về thuộc tính width. |
loading | "eager" | "lazy" | Chiến lược tải ảnh. - eager: Tải ảnh ngay lập tức, bất kể vị trí của ảnh trong viewport đang hiển thị. - lazy: Trì hoãn việc tải ảnh cho đến khi ảnh tiến đến một khoảng cách nhất định so với viewport. Tìm hiểu thêm về thuộc tính loading. |
objectFit | "contain" | "cover" | Cách thay đổi kích thước ảnh để vừa trong vùng chứa. - contain: Co giãn ảnh để vừa trong vùng chứa mà vẫn giữ tỉ lệ khung hình. Toàn bộ ảnh được hiển thị, nhưng có thể để lại khoảng trống. - cover: Co giãn ảnh để lấp đầy toàn bộ vùng chứa mà vẫn giữ tỉ lệ khung hình. Ảnh có thể bị cắt để vừa. Ảnh luôn được đặt ở giữa vùng chứa. Tìm hiểu thêm về thuộc tính object-fit. |
sizes | string | Một tập hợp các điều kiện media và kích thước tương ứng của chúng. |
src | string | Nguồn ảnh (URL từ xa hoặc tài nguyên file cục bộ). Khi ảnh đang tải hoặc không có src, một placeholder sẽ được render. |
srcSet | string | Một tập hợp các nguồn ảnh cùng với bộ mô tả độ rộng hoặc mật độ điểm ảnh của chúng. Thuộc tính này ghi đè thuộc tính src. |
Events
| Event | Kiểu |
|---|---|
error | CustomEvent |
load | CustomEvent |
Lắng nghe các event này bằng listener dạng @error trên <SImage>.