vue图片加载失败默认图片[通俗易懂]
Vue 通俗易懂 图片 加载 失败 默认
2023-06-13 09:11:57 时间
大家好,又见面了,我是你们的朋友全栈君。
css解决方案:
img {
position: relative;
}
img:after {
content: url('替代圖片');
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
}
这样使用是应为img标签的一些特性:
1,img是个比较特殊的标签,和video一样具有被替代性,所有当图片加载成功时,原先定义的伪类会失去作用不提示。
2,alt属性会在图片加载失败是出现(替代文字),这样伪类就会起作用了。
onerror方法:
<div class="bg">
<img :src="goods.phoneFloorAd.resUrl" :onerror="errorImg01">
</div>
<script type="text/ecmascript-6">
export default {
data () {
return {
errorImg01: 'this.src="' + require('assets/images/load_logo01.png') + '"'
};
}
}
</script>
上传下图片
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/137179.html原文链接:https://javaforall.cn
相关文章
- vue vue-element-ui组件 layout布局系列学习(一)[通俗易懂]
- Vue 绑定使用 touchstart touchmove touchend[通俗易懂]
- 我离开jQuery(layui)选择vue[通俗易懂]
- Vue(6)v-on指令的使用[通俗易懂]
- Vue笔记(11) vue-router
- vue 最简易的邮箱正则表达式[通俗易懂]
- babel es6转es5原理_vue用es6还是es5
- vue分页组件动态页码_怎样分页设置页码
- 能不能手写Vue响应式?前端面试进阶
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- VUE双向绑定原理_vue的数据绑定怎么实现
- 【随手记】Vue知识点
- 创建一个vue项目并配置默认页面
- jQuery和Vue的区别[通俗易懂]
- 你可能需要的vue相关考点汇总
- 好用的vue富文本编辑器记录[通俗易懂]
- vue引入外部js文件并使用_为什么vue不使用ajax
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- 今天讲vue讲解专栏里的VUE组件
- java和vue学生定位打卡小程序人脸识别打卡系统源码网站学生考勤系统
- Vue 按条件添加类
- vue实现多个倒计时同步刷新
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)
- Vue用Redis储存获取数据(vue获取redis)
- 从零开始Vue项目中使用Redis(vue使用redis)
- Vue搭配Redis做针对性取值(vue redis取值)
- Oracle与Vue官网联合宣传前瞻技术,轻松开发(oracle vue官网)