ln-cos-web

普通图片

    <img src="src/assets/demo2.png" alt="普通图片" />

传宽高用法：默认contain

  <LnImage
    class="image-example-border h-[200px] w-[200px]"
    :src="src"
  ></LnImage>

object-fit:cover

  <LnImage
    class="image-example-border h-[200px] w-[200px]"
    :src="src"
    fit="cover"
  ></LnImage>

保证图片完整展示:传正确比例的宽度+高度

  <LnImage
    class="image-example-border h-[160px] w-[200px]"
    :src="src"
    fit="cover"
  ></LnImage>

保证图片完整展示:传宽度+scale

  <div class="w-[200px]">
    <LnImage
    class="image-example-border"
    :scale="1250 / 1000"
    :src="src"
    fit="cover"
    ></LnImage>
  </div>

不传width和height:默认根据外部容器撑开

  <div class="h-[200px] w-[200px]">
    <LnImage class="image-example-border" :src="src"></LnImage>
  </div>

scale用法:根据外部容器宽度保持图片比例，主要用于flex/grid布局

  <ul class="grid grid-cols-4">
    <li v-for="item of 4" :key="item">
      <LnImage
        :scale="1250 / 1000"
        :src="src"
      ></LnImage>
    </li>
  </ul>

增加背景颜色:isUseImageAve，图片加载完成之前，展示背景颜色，颜色为图片的主色调

      <LnImage
        :width="200"
        :height="200"
        :src="slowSrc"
        isUseImageAve
      ></LnImage>

修改转换格式:format

      <LnImage
        :width="200"
        :height="200"
        :src="slowSrc"
        format="jpg"
      ></LnImage>

自定义图片处理:process，可以自定义成任意想要的图片地址，参数是已经算好的各种Cos处理参数

      const processFn = (processParams) => {
        console.log('processParams', processParams)
        const slowSrc = 'https://image-platform.leniugame.com/act/mxty_ng/%E5%AE%8C%E6%95%B4%E5%BA%95.png'
        return slowSrc
      }
      <LnImage
        :width="200"
        :height="200"
        :src="src"
        :process="processFn"
      ></LnImage>

懒加载：默认支持

  <LnImage
    class="image-example-border h-[200px] w-[200px]"
    :src="src"
    isUseImageAve
    fit="cover"
  ></LnImage>

水印

  <div class="w-full">
    <LnImage
    class="image-example-border"
    :scale="1250 / 1000"
    :src="src"
    :watermark="{
      text: '测试一下',
    }"
    fit="cover"
    ></LnImage>
  </div>

图片按钮

  <div class="w-[200px]">
    <LnImage :scale="570 / 148" :src="downloadButtonSrc" isButton></LnImage>
  </div>

图片按钮:disabled(默认会置灰)

  <div class="w-[200px]">
    <LnImage
    :scale="570 / 148"
    :src="downloadButtonSrc"
    isButton
    disabled
    ></LnImage>
  </div>

背景图片:

  <div>
    <LnImage class="image-example-border" :scale="1250 / 1000" :src="src">
    <div class="flex justify-center">
      <div class="absolute bottom-0 w-[200px]">
      <LnImage
        :scale="570 / 148"
        :src="downloadButtonSrc"
        isButton
      ></LnImage>
      </div>
    </div>
    </LnImage>
  </div>