【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)"
 />
相关推荐
独立开阀者_FwtCoder5 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士5 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
Hilaku13 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿13 分钟前
Js事件循环
javascript
datagear13 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
艾克马斯奎普特20 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范
namehu21 分钟前
“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南
javascript·html
MR_发22 分钟前
万字实现带@和表情包的输入框
vue.js·typescript
多啦C梦a23 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript
yvvvy38 分钟前
# React Hooks 全面解析:从 useState 到 useEffect,掌握状态与副作用管理
javascript