Vue 通过 VueUse useImage 实现响应式的加载图片

Vue 通过 VueUse useImage 实现响应式的加载图片，它可以响应式的获取图片价值的状态，比如加载中、加载失败。

代码示例 

<script setup>
import { useImage } from '@vueuse/core'

const avatarUrl = 'https://www.itxst.com/img/logov31.png'
const { isLoading } = useImage({ src: avatarUrl })
</script>

<template>
  <span v-if="isLoading">Loading</span>
  <img v-else :src="avatarUrl">
</template>

在线例子

例子

组件用例

也可以通过UseImage组件显示图片

<template>
  <UseImage src="https://place.dog/300/200">
    <template #loading>
      Loading..
    </template>
    <template #error>
      Failed
    </template>
  </UseImage>
</template>
<script setup  lang="ts">  
 //导入组件
 import {UseImage} from '@vueuse/components'
</script>

参数配置

const { isLoading } = useImage({
  /* 图片地址 */
  src: string
  /* 
  根据屏幕分辨率显示不同的图片
  srcset="x1.jpg 1x,
         x2.jpg 2x, 
         x3.jpg 3x"
   */
  srcset?: string
  /*
  诉浏览器根据屏幕尺寸和像素密度的计算值从srcset 中选择最佳的图片源
       sizes="(max-width: 320px) 100px,
            (max-width: 450px) 200px,
            (max-width: 700px) 300px,
            (max-width: 800px) 400px,
            (max-width: 900px) 500px,
      1024px"
   */
  sizes?: string
  /* 图片描述 */
  alt?: string
  /* 图片样式 */
  class?: string
  /* Image loading */
  loading?: HTMLImageElement['loading']
  /* Image CORS 跨越设置 有anonymous，use-credentials两个值 */
  crossorigin?: string
  /* Referrer policy for fetch 
  https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy */
  referrerPolicy?: HTMLImageElement['referrerPolicy']
 })