Vue3图片未加载成功前占位的问题及解决
作者：不想起名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)"
/>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。