【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)"
 />
相关推荐
猫猫不是喵喵.5 小时前
vue 路由
前端·javascript·vue.js
烛阴5 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91535 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
拉不动的猪6 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
魔云连洲7 小时前
Vue2和Vue3响应式的基本实现
开发语言·前端·javascript·vue.js
CreatorRay7 小时前
受控组件和非受控组件的区别
前端·javascript·react.js
JSON_L8 小时前
Vue 组件通信 - Ref组件通信
javascript·vue.js·ecmascript
努力的搬砖人.8 小时前
Vue 2 和 Vue 3 有什么区别
前端·vue.js·经验分享·面试
Fri_9 小时前
Vue 使用 xlsx 插件导出 excel 文件
javascript·vue.js·excel
黑贝是条狗9 小时前
html 列表循环滚动,动态初始化字段数据
前端·javascript·html