SImage <s-image>

Aspect ratio, fit, borders और lazy loading पर नियंत्रण के साथ एक image दिखाता है। SImage Shopify के Polaris <s-image> web component का typed Vue 3 wrapper है।

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

Best practices

• साफ़ और optimized images इस्तेमाल करें। ऐसी high-resolution images चुनें जो web के लिए optimized भी हों।
• Images किसी मकसद से जोड़ें। Image तभी शामिल करें जब वह content को ज़्यादा साफ़ बनाए या merchants को राह दिखाने में मदद करे।

सभी सुझावों के लिए <s-image> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

नीचे दी गई image picsum.photos से load होती है, जो एक third-party placeholder image service है; इसका इस्तेमाल सिर्फ़ demo के लिए किया गया है।

<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	Type	विवरण
accessibilityRole	"presentation" | "none" | "img"	component की सामग्री का semantic अर्थ। सेट करने पर, assistive technologies इस role का उपयोग उपयोगकर्ताओं को page पर navigate करने में मदद के लिए करती हैं। - none: element और उसकी सामग्री को assistive technologies से पूरी तरह छिपा देता है - presentation: semantic अर्थ हटा देता है, जिससे image केवल सजावटी बन जाती है और screen readers उसे अनदेखा कर देते हैं। - img: element को ऐसी image के रूप में पहचानता है जो उपयोगकर्ताओं तक सार्थक जानकारी पहुँचाती है।
alt	string	image का वर्णन करने वाला वैकल्पिक text, ताकि पढ़ने वाला समझ सके कि image किस बारे में है। यह assistive technology इस्तेमाल करने वाले users और देख सकने वाले users, दोनों के लिए बेहद उपयोगी है। अच्छी तरह लिखा गया विवरण दृष्टिबाधित लोगों को non-text content का उपयोग करने में सक्षम बनाता है। जब कोई screen reader किसी s-image पर पहुँचता है, तो विवरण पढ़कर सुनाया जाता है। अगर कोई image load नहीं हो पाती, जैसे कमज़ोर connection के कारण, तो उसकी जगह screen पर alt दिखाया जाता है। इसका फ़ायदा यह है कि देख सकने वाले खरीदार को पता चलता है कि यहाँ एक image load होनी थी, और विकल्प के रूप में वे text content का उपयोग कर पाते हैं। और जानने के लिए वैकल्पिक text लिखते समय ध्यान रखने वाली बातें पढ़ें।
aspectRatio	${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}	image का aspect ratio। image का rendering inlineSize value पर निर्भर करेगा: - inlineSize="fill": aspect ratio का पालन होगा और image आवश्यक जगह लेगी। - inlineSize="auto": image load होने तक render नहीं होगी और aspect ratio को नज़रअंदाज़ किया जाएगा। उदाहरण के लिए, अगर value 50 / 100 सेट है, तो getter 50 / 100 लौटाता है। अगर value 0.5 सेट है, तो getter 0.5 / 1 लौटाता है। aspect-ratio property के बारे में और जानें।
border	BorderShorthand	shorthand syntax से लगाई गई border, जो एक ही property में width, color और style तय करती है।
borderColor	"subdued" | "base" | "strong"	design system के color scale का उपयोग करके border का color। सेट होने पर, यह border property में दी गई color value को override करता है। आवश्यक visual ज़ोर के अनुसार subdued, base या strong में से चुनें।
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	design system के radius scale का उपयोग करते हुए element के कोनों की गोलाई। हर कोने के लिए अलग radius तय करने हेतु 1 से 4 मानों वाले syntax का समर्थन करता है। गोल कोने या पूरी तरह गोल elements बनाने के लिए इसका उपयोग करें।
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	सभी ओर border की visual style, जैसे solid, dashed या dotted। सेट करने पर, यह border property में दिए गए style मान को override करता है। हर ओर के लिए अलग style तय करने हेतु 1 से 4 मानों वाले syntax का समर्थन करता है।
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	सभी ओर border की मोटाई। सेट करने पर, यह border property में दिए गए width मान को override करता है। हर ओर के लिए अलग width तय करने हेतु 1 से 4 मानों वाले syntax का समर्थन करता है।
inlineSize	"auto" | "fill"	image की दिखाई देने वाली inline चौड़ाई। - fill: image उपलब्ध inline size का 100% घेरेगी। - auto: image अपने स्वाभाविक आकार में दिखाई जाएगी। width attribute के बारे में और जानें।
loading	"eager" | "lazy"	image की loading strategy। - eager: image को तुरंत load करता है, चाहे वह दिखाई देने वाले viewport में कहीं भी हो। - lazy: image की loading को तब तक टालता है जब तक वह viewport से एक तय दूरी के करीब न आ जाए। loading attribute के बारे में और जानें।
objectFit	"contain" | "cover"	image का resizing व्यवहार, ताकि वह अपने container में फिट हो सके। - contain: aspect ratio बनाए रखते हुए image को container में फिट होने के लिए scale करता है। पूरी image दिखाई देती है, लेकिन खाली जगह बच सकती है। - cover: aspect ratio बनाए रखते हुए image को पूरे container को भरने के लिए scale करता है। फिट होने के लिए image crop हो सकती है। image हमेशा container के बीच में रखी जाती है। object-fit property के बारे में और जानें।
sizes	string	media conditions का एक सेट और उनके संगत sizes।
src	string	image का source (या तो कोई remote URL या कोई local file resource)। जब image load हो रही हो या कोई src न दिया गया हो, तो एक placeholder render होगा।
srcSet	string	image sources का एक सेट, साथ में उनके width या pixel density descriptors। यह src property को override करता है।

Events

Event	Type
error	CustomEvent
load	CustomEvent

इन्हें <SImage> पर @error जैसे listeners से सुनें।