rust相框加载图片代码_vue图片加载与显示默认图片实例代码
本文实例为大家分享了vue图片加载与显示默认图片的具体代码,供大家参考,具体内容如下
HTML:
JS:
Vue.prototype.successLoadImg = function(event) {
if (event.target.complete == true) {
event.target.classList.remove("default-image");;
var imgParentNode = event.target.parentNode;
if(imgParentNode.classList.contains('show-img')==true){
imgParentNode.style.background = "#000";
}
}
};
Vue.prototype.errorLoadImg = function(event) {
event.target.classList.add("default-image");;
};
针对尺寸不统一的:先显示默认图片,加载成功时移除默认图片,填充背景。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
rust相框加载图片代码_vue图片加载与显示默认图片实例代码相关推荐
- JS 判断图片是否是否存在--不存在则显示默认图片
1.最简便的方法:使用 img 的 onerror 事件 https://www.jb51.net/article/8796.htm 正常显示前者,错误时显示后者 <img src=" ...
- 判断图片是否存在,不存在则显示默认图片
记录每一个小坑.大坑 利用image对象的onerror事件来判断,出错则更换image对象的src为默认图片的 URL html 代码 <img src="./img/No_Pics ...
- js中图片加载失败,显示默认图片
js处理img标签加载图片失败,显示默认图片 1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: $('img').error(function(){$ ...
- htmlimg图片加载失败_html网页图片未加载完成或失败时显示默认图片
前言 一般一个内容多的网站相对会有比较多的图片文件,但是同时加载这些图片文件或加载失败时会出现空白占位,影响美观,通过脚本控制,可以实现加载需求内容图片时,加载未完成或失败的时候显示一张本地默认图片, ...
- vue解决图片加载失败显示默认图片的方法
在项目中经常会遇到图片加载失败需要显示默认图片的场景,那么如何在图片src资源加载失败显示出默认的图片呢? 方法一:onerror <img src="原来要加载的资源" o ...
- vue项目中 img标签加载图片失败,让其显示默认图片
<img src="123" @error="defImg" alt="" width="150" > 可以 ...
- vue 图片 404 显示默认图片
写在前: vue中循环显示图片,报错404,未加载图片的情况下可以使用默认图片 使用线上图片: <img :src="oneurl" alt="图片" o ...
- Vue.js项目中,当图片无法显示时则显示默认图片
Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法 最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片 本人试了3种方法,2种方法失败了 ...
- img标签无图片或者图片url错误时显示默认图片
img标签无图片或者图片url错误时显示默认图片 如上图,四个img标签中插入四张图片. 核心:οnerrοr="this.src='默认图片路径' " 当img标签src路径错误 ...
- HTML显示默认图片实现
很多时候,在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片. 可以通过以下方式: <img src="xxx.jpg" onError="t ...
最新文章
- 你想要的宏基因组-微生物组知识全在这(180601)
- 算法----------快乐数 (Java版本)
- java web学习笔记-jsp篇
- 【活体检测】二分类活体检测评价方式
- Oracle 11g行字段拼接WMSYS.WM_CONCAT问题Not A LOB
- 江苏省2021年高考成绩查询有分数吗,2021年江苏省高考成绩查询入口
- 深度学习2.0-19.随机梯度下降之可视化与实战
- this关键字在构建错误实例时使用说明
- ngrok下载并运行实现内网穿透
- Springboot+Vue+EasyExcel实现web页面的excel读取
- OSChina 周五乱弹 —— 男友手机上存了好多鸡的照片
- 【机器视觉】——焦距计算物体实际尺寸计算
- 几个项目管理的小故事
- LeetCode刷题时遇到error: control reaches end of non-void function [-Werror=return-type]的解决方法
- android开发banner框架,Android 轮播图 最火的banner框架 (包含demo和代码解释)
- aliyun短信及短信模板操作
- MyEclipse下载地址全攻略
- 动手撸一个金馆长表情库——爬虫及异步请求
- 线性代数的本质与微积分的本质视频分享
- FastText文本分类中的n-grams