vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法

vue图片加载失败时用默认图片替换的方法

前言

本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧

方法如下

原理就是给img绑定error事件，替换原有的src地址。

首先在data中创建一个defaultImg(随便起的)，里面的值是该默认图片的地址；

在html页面的img标签上绑定该属性

这样默认图片就设置好了；

这样做的好处就是可以提高用户体验，而图片的alt属性，是在图片显示失败后出现的文字，像下图所示，但是这样的用户体验不高；

像后台管理系统中，如果是这样或者是有一个默认封面的话，会感觉很舒服；

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

时间： 2019-08-27

好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p

如下所示:

在vue中使用图片懒加载详细指南,分享给大家.具体如下: 说明当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点. 使用方式使用vue的 vue-lazyload 插件插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo: 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https:

demo:

引入图片,注意路径: import con1 from "@/assets/img/con01.png"; impor

目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法页面通过v-bind的方式加载: PS:vue中图片src路径赋值 vue中引入static文件夹中图片,本以为src中直接写入图片所在路径即可,结果发现图片无法显示,控制台报404错误,图片无法找到.网上找到解决方案,在此mark一下,以便以后查询. 图片src路径动态赋值

一. 加载本地图片 1.图片目录 2. 在data中配置图片路径 data() { return { formData: { avatar: require('@/assets/icon1524737568182.png'), motto: 'xxxxxxxxxx' }, routers: this.$router.options.routes } } 3. 在需要的地方引入图片

vue-cli 项目中本地图片放在assets目录下(原因vue-cli最开始的vue图片就在里面,就把所有图片放在里面了): 之后v-for 动态加载图片路径就遇到了问题源码:

本文实例为大家分享了vue图片加载与显示默认图片的具体代码,供大家参考,具体内容如下 HTML:

Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o

watch应用场景我想信图片预加载大家肯定都有接触过,当图片量大的时候,为了保证页面图片都加载出来的时候,我们才把主页面给显示出来,再进行一些ajax请求,或者逻辑操作那此时你用computed对这种监听一个数据然后进行一系列逻辑操作和ajax请求,那watch再适合不过了,如果用computed的话那你连实现都实现不了,只有用watch监听

图片批量加载 function $id(id){ return document.getElementById(id);} function $c(tagName){ return document.createElement(tagName);} window.onload = function(){ imageLoad( { url:function(v){ v = []; for(var i=1; i [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

关于iframe异步加载,我们常用的大都是左边菜单栏右边是内容页面,要求我们不能左边菜单不能刷新的情况下,异步加载右边的内容页面. 话不多说,做了一个实例大致是这样的: 1.首先在你的项目中建立三个文件如: 2.在Default页面引入jquery文件并在body中加入也下代码: 复制代码代码如下:

一.前置知识详解 Spark SQL重要是操作DataFrame,DataFrame本身提供了save和load的操作, Load:可以创建DataFrame, Save:把DataFrame中的数据保存到文件或者说与具体的格式来指明我们要读取的文件的类型以及与具体的格式来指出我们要输出的文件是什么类型. 二.Spark SQL读写数据代码实战 import org.apache.spark.SparkConf; import org.apache.spark.api.java.JavaRDD;

网页中的图片预加载图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image.onload = function() { console.log('图片加载完成') } image.src = 'http://misc.360buyimg.

vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法相关推荐

图片加载失败时,显示默认图片
当我们页面中需要加载一些图片时,可能由于网络问题,或者图片文件缺失等问题,导致图片不能正常展示我们希望有一种降级处理的方式,可以在图片加载失败后显示一张我们预先设定好的默认图片 1.监听图片的 er ...
htmlimg图片加载失败_html网页图片未加载完成或失败时显示默认图片
前言一般一个内容多的网站相对会有比较多的图片文件,但是同时加载这些图片文件或加载失败时会出现空白占位,影响美观,通过脚本控制,可以实现加载需求内容图片时,加载未完成或失败的时候显示一张本地默认图片, ...
vue本地项目静态资源管理
vue本地项目静态资源管理统一放在src/static里面css,images,js index.html里面使用重置样式 <link rel="stylesheet" h ...
vue本地项目实现局域网访问
vue本地项目实现局域网访问首先需要在同一个网络中,才能进行互相访问记得先关闭防火墙(若是需要长时间关闭防火墙觉得不安全请参考这篇博客) 首先需要找到config下的index.js文件,更改访问 ...
当图片404时显示默认图片
当图片404时显示默认图片 1.当图片未找到时或者404时,触发onerror显示其中的图片 eg: <img src="当前图片的地址" onerror="thi ...
img标签无图片或者图片url错误时显示默认图片
img标签无图片或者图片url错误时显示默认图片如上图,四个img标签中插入四张图片. 核心:οnerrοr="this.src='默认图片路径' " 当img标签src路径错误 ...
img图片不存在时设置默认图片
img设置是一个圆的样子,发现调取接口之后返回img路径是空,img显示是一个正方形,找了方法解决当图片不存在时设置默认图片 <img src="图片的url地址" alt ...
HTML img图片加载失败时用默认图片替换
原文地址:http://blog.csdn.net/qq_24771775/article/details/50294931 img元素加载图片失败,则变成一个小图标,让页面变得难看.此时如何替换为默 ...
图片加载失败时展示默认图片
HTML: <img src='${defalutImg}' data-src="${fileDomain }/images/${poi.firstPic}" width=& ...

vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法

vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法相关推荐

最新文章

热门文章