Vue3圖片未加載成功前占位的問題及解決
更新時間：2025年06月12日 09:53:46 作者：不想起名55
這篇文章主要介紹了Vue3圖片未加載成功前占位的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
背景
在寫項(xiàng)目時，加載圖片未成功前，會出現(xiàn)空白頁面，太影響美觀和體驗(yàn)感
解決方案
element ui通過slot占位符解決
自定義指令
原生img標(biāo)簽可以通過自定義指令解決，img標(biāo)簽有onload和onerror事件，都是在渲染成功后才出發(fā)，想占位要在渲染前觸發(fā)
<template>
<img
class="image_item-img"
v-preload="'loading'"
src="https://xx"
alt="加載失敗"
/>
</template>
<script setup>
import { reactive } from 'vue'
// 自定義圖片占位
const vPreload = {
//未渲染img標(biāo)簽前
beforeMount(el, binding) {
el.style.backgroundColor = '#ececec'
el.classList.add(binding.value) //binding.value是上面?zhèn)鬟^來'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)"
/>總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue watch深度監(jiān)聽對象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動效果
這篇文章主要介紹了vue watch深度監(jiān)聽對象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了Vuei18n 在數(shù)組中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue2+tracking實(shí)現(xiàn)PC端的人臉識別示例
本文主要介紹了vue2+tracking實(shí)現(xiàn)PC端的人臉識別示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要Vue 處理表單input單行文本框的實(shí)例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了TypeScript中集成Tween.js踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Element-ui樹形控件el-tree自定義增刪改和局部刷新及懶加載操作
這篇文章主要介紹了Element-ui樹形控件el-tree自定義增刪改和局部刷新及懶加載操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本文介紹了如何刪除全局和本地的webpack及其CLI,并提供了檢查webpack殘余文件的方法,總結(jié)了個人的操作經(jīng)驗(yàn),旨在為讀者提供參考,并期待獲得更多支持2024-09-09
vue.js實(shí)現(xiàn)數(shù)據(jù)動態(tài)響應(yīng) Vue.set的簡單應(yīng)用
這篇文章主要介紹了vue.js實(shí)現(xiàn)數(shù)據(jù)動態(tài)響應(yīng)，Vue.set的簡單應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了vue原生方法自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue3.x使用swiperUI動態(tài)加載圖片失敗的解決方法
這篇文章主要為大家詳細(xì)介紹了vue3.x使用swiperUI動態(tài)加載圖片失敗的解決方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07