【Vue3】图片未加载成功前占位

背景

在写项目时,加载图片未成功前,会出现空白页面,太影响美观和体验感

解决方案

1. element ui通过slot占位符解决

2. 自定义指令

原生img标签可以通过自定义指令解决,img标签有onload和onerror事件,都是在渲染成功后才出发,想占位要在渲染前触发

html 复制代码
<template>
     <img
         class="image_item-img"
         v-preload="'loading'" 
         src="https://xx"
         alt="加载失败"
     />
</template>
<script setup>
import { reactive } from 'vue'

// 自定义图片占位
const vPreload = {
	//未渲染img标签前
    beforeMount(el, binding) {
        el.style.backgroundColor = '#ececec'
        el.classList.add(binding.value) //binding.value是上面传过来'loading',我自定义的类名(可自己定义loading样式)
    },
    mounted(el, binding) {
        el.addEventListener('error', () => {
            el.classList.remove(binding.value)
        })
    },
}
</script>

3.用图片代替

html 复制代码
 <img
     class="image_item-img"
     v-for="(item, index) in imageList"
     :key="item.id"
     :src="item.url ? require('/src/assets/logo.png') : item.url"
     alt="加载失败"
     @click="handlePreview(index)"
 />
相关推荐
前端小巷子21 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志1 小时前
typescript结构化类型应用两例
javascript
gnip2 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956392 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员3 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘3 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的3 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
南屿im3 小时前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript