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']
})