vueuse 中文文档

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']
 })
Catalog
vueuse 入门 State 状态 Elements 元素 Browser 浏览器 useBluetooth 蓝牙函数 useBreakpoints 网页网格断点 useBroadcastChannel 跨网页通讯 useBrowserLocation 响应式location useClipboard 粘贴复制 useColorMode 皮肤颜色切换 useCssVar 修改css变量 useEventListener 事件监听 useEyeDropper 取色器 useFavicon 设置浏览器窗口图标 useFileDialog 文件选择器 useFileSystemAccess 操作本地文件 useFullscreen 全屏模式 useGamepad 游戏手柄 useImage 图片 useMediaControls 视频音频控制 useMediaQuery 媒体查询 useMemory 响应式内存信息 useObjectUrl 响应式对象URL