【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)"
 />
相关推荐
li35747 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj7 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
^Rocky8 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵9 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
笑鸿的学习笔记9 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
萌萌哒草头将军10 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
gnip11 小时前
http缓存
前端·javascript
JohnYan12 小时前
工作笔记 - 微信消息发送和处理
javascript·后端·微信
陈陈爱java13 小时前
Spring八股文
开发语言·javascript·数据库
@大迁世界13 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html