Image 图片

基础用法

代码演示

vue

<template>
  <s-image src="https://global.bing.com/th?id=OHR.ElmauChapel_ZH-CN6919330333_1920x1080.jpg"
    aspect-ratio="3 / 1"></s-image>
  <s-image src="https://global.bing.com/th?id=OHR.ElmauChapel_ZH-CN6919330333_1920x1080.jpg"
    aspect-ratio="2 : 1"></s-image>
  <s-image src="https://global.bing.com/th?id=OHR.ElmauChapel_ZH-CN6919330333_1920x1080.jpg"
    :aspect-ratio="[1, 1]"></s-image>
</template>

额外内容

vue

<template>
  <s-image style="width: 100px;padding: 10px;" src="https://ufile.hamiparty100.com/uc/img/ceremony2025Family_pop_1.png"
    aspect-ratio="1">
    <template v-slot:overlay>
      <img src="https://activity.hamiparty100.com/2025/ceremony2025Family/img/cover-1_f94114.png">
    </template>
    <template v-slot:decoration>
      <img style="width: 30px;"
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAABOCAMAAAC5dNAvAAADAFBMVEVHcEzFcRf1uUW4ZhveiQnJcRDklhjhkA/mjQ7EcAveiw67ZRXdiAvagAP94GrjlhPqoyLutDLaggb5tT/1017UewXkpjDZkSC3ZRH0szr0sDPjlRXTgRLKcgXGhSvGdBfRm0DBcBjpoSbnoB/yrTbjkxXroybmmhvyxEn2uEPrqjfqpCPfiQbimiHQewrOdQPYoDvQiyPIbQK9agy3ZxK1ZBP95nL85G733WX72mLvpynfigrxqS/95m/ysTXnoCTnnRvttDbKeRrdjRHppijgigjeoDTBbQrAbhm7aBrLeRfsuDn53WXtoSv2zFDqsDLzxkr2zlT41l363WT84mv4tUL0uD/xujr1y1DstDbVhhXhnyfgnii0Xxr10lrnqSn30lrywUTwuTrXfAD5tkP4tUH6t0XKdgrBcBCzYBr//5///pr+/Zz//53+/Z3//57+/57//pv9/Jr57oTrui779ZH784z//Zn24W/79I7x0VT46n7yzk///JH/9Yf35XT8+Jb895L/+Y//94v464D8+Zfy01j132z13GfxzEzlpQv/943/+pH895T78or243Lx0FHvyUb68If//JPwy0nsvTL9+pny1Vv02WH353fuxUDtwjrqtSb/8oH57YH/9on/9IPjnwP022Ttwz3twDfmqA/mqxTptCP13Wrvx0P//6P/2k/tvjXqtyn36nz/7HX/31r/6Gzz117/9IXpsiD//pf/7Xf/8X7kogf/7HL/6nH/8Hz/5WbpsB3/6W7/8Hr//ZT/5WP/4V7orhr/5mn/42DppBT//JbnrRf/3Vb/3VP/00LmohTgmwD/1Uj/2Er46Hr/837pphfrrzHz44L011736Hv/zy/332r12WXz1WPvwUj/0DzwvD/oqSz8+JT/zTjxzmHz2GHloBHttjrlw2HmpSbwyETz01v00lXnqR/zxkv1zlX00Fv0z0v/7nr/8HX//Iz/41ntxlfz3Xf/2EHsyWL/1Tn9yTPhmx/oryf/7Gr00mD7wij001PttDBPNZGMAAAAanRSTlMACCDvFA0i7wMZ7mG1Qx3nQhdn7/1z/NlN7ubU7nja7vzKhumIiu7u34j1dXDZV7X820h2u3mB4fp95ofu7rJKttvO0dl0+bru7vTm4R+A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">
    </template>
    <template v-slot:bg>
      <img src="https://activity.hamiparty100.com/2025/ceremony2025Family/img/frame-gift_d08bbd.png">
    </template>
  </s-image>
</template>

Image 图片 ​

基础用法 ​

Image 图片

基础用法