Vue.js组件开发-图片加载失败自动显示默认图片

在 Vue.js 组件开发中,处理图片加载失败并自动显示默认图片可以通过 Vue 的指令和事件绑定来实现这一功能。

示例:

展示如何在图片加载失败时自动显示默认图片:

html 复制代码
<template>
  <div>
    <!-- 使用 :src 绑定图片的 URL,并使用 @error 事件处理加载失败 -->
    <img :src="imageSrc" @error="onError" :alt="altText" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始图片 URL
      imageSrc: 'https://example.com/path/to/your/image.jpg',
      // 默认图片 URL
      defaultImageSrc: 'https://example.com/path/to/default/image.jpg',
      // 图片的替代文本
      altText: '描述图片内容的文本'
    };
  },
  methods: {
    onError(event) {
      // 当图片加载失败时,将图片的 src 替换为默认图片的 URL
      event.target.src = this.defaultImageSrc;
    }
  }
};
</script>

<style scoped>
/* 你的样式代码 */
</style>

说明:

这个示例中,定义了一个 Vue 组件,包含一个 <img> 元素。这个元素的 src 属性绑定到 imageSrc 数据属性,该属性存储了图片的 URL。同时,为 <img> 元素添加了一个 @error 事件监听器,当图片加载失败时,会调用 onError 方法。

在 onError 方法中,我们通过事件对象 event 访问到触发事件的 <img> 元素,并将其 src 属性替换为 defaultImageSrc 中存储的默认图片的 URL。

这样,当原始图片加载失败时,图片就会自动替换为默认图片。

相关推荐
Juchecar1 小时前
Vue 3 推荐选择组合式 API 风格(附录与选项式的代码对比)
前端·vue.js
uncleTom6661 小时前
# 从零实现一个Vue 3通用建议选择器组件:设计思路与最佳实践
前端·vue.js
yede2 小时前
uniapp - 自定义页面的tabBar
vue.js·uni-app
Juchecar2 小时前
Vue3 模块组织及 Import 机制详解 - 初学者完全指南
前端·vue.js
郭少3 小时前
🔥 我封装了一个会“思考”的指令!Element-Plus Tooltip 自动检测文本溢出,优雅展示
前端·vue.js·性能优化
郭少3 小时前
🔥 放弃 vw!我在官网大屏适配中踩了天坑,用 postcss-px-to-viewport-8-plugin 实现了 Rem 终极方案
vue.js·性能优化·nuxt.js
咸虾米3 小时前
微信小程序通过uni.chooseLocation打开地图选择位置,相关设置及可能出现的问题
vue.js·微信小程序
鹏多多3 小时前
深入解析vue的transition过渡动画使用和优化
前端·javascript·vue.js
前端小巷子4 小时前
Vue3 响应式革命
前端·vue.js·面试
杨荧5 小时前
基于Python的反诈知识科普平台 Python+Django+Vue.js
大数据·前端·vue.js·python·数据分析