Vue3图片未加载成功前占位的问题及解决
更新时间：2025年06月12日 09:53:46 作者：不想起名55
这篇文章主要介绍了Vue3图片未加载成功前占位的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
背景
在写项目时，加载图片未成功前，会出现空白页面，太影响美观和体验感
解决方案
element ui通过slot占位符解决
自定义指令
原生img标签可以通过自定义指令解决，img标签有onload和onerror事件，都是在渲染成功后才出发，想占位要在渲染前触发
<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>
用图片代替
<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)"
/>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中$refs的三种用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
我们在做了用户登录后,就会让用户跳转到个人中心,下面这篇文章主要给大家介绍了关于如何使用Vue+Element做个个人中心的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue中使用swiper,左右箭头点击没有效果问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
Vue3+TypeScript报错:无法找到模块xx的声明文件问题
这篇文章主要介绍了Vue3+TypeScript报错:无法找到模块xx的声明文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
vue3+ts项目之安装eslint、prettier和sass的详细过程
这篇文章主要介绍了vue3+ts项目02-安装eslint、prettier和sass的详细过程,在本文讲解中需要注意执行yarn format会自动格式化css、js、html、json还有markdown代码，需要的朋友可以参考下2023-10-10
本文主要介绍了VUE侧边导航栏实现筛选过滤的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
vue 中的自定义指令是对底层 dom 进行操作，下面以实现滚动到底部加载数据，实现无限加载来介绍如何自定义一个简单的指令。2017-01-01
在一般业务中监听的最多的就是 Click 事件，但是在一些业务比如 Alert 和 Pop 效果时，需要监听在元素外部的点击来关闭弹窗。2020-11-11
这篇文章主要介绍了vue项目百度地图如何自定义标注marker问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本篇文章主要介绍了vue 里面使用axios 和封装的示例代码，非常具有实用价值，需要的朋友可以参考下2017-09-09
最新评论