Vue中图片失效替补图片的制作方法

最新推荐文章于 2023-02-13 10:31:53 发布
最新推荐文章于 2023-02-13 10:31:53 发布
阅读量558 收藏 1
点赞数
分类专栏： vue 工作知识总结 文章标签： 图片替补 vue图片缺失问题
本文为博主原创文章，未经博主允许不得转载
本文链接：https://blog.csdn.net/qq_39197547/article/details/81626830
版权
vue 同时被 2 个专栏收录
34 篇文章 10 订阅 ¥299.90 ¥99.00
订阅专栏
工作知识总结
25 篇文章 1 订阅
订阅专栏

Vue中图片失效替补图片的制作方法

 

在我们工作中，有些图片失效，为了让页面不至于太难看。我们需要让他显示一张替补图片。

 

制作一张替补图片，如果会ps 你可以自己制作一张优雅的图片，但是尽量不要用彩色（你懂得~ . ~）

或者直接在网上找一张图片

 

将图片放到相应的位置

我们把图片命名为erroring.png放在src/assets/images/下

然后我们在有图片的地方。

 

首先在data中加入errorImg属性

data(){

return {

<

了解本专栏 订阅专栏 解锁全文
随风小薇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue中实现图片压缩 file文件的方法
10-15
主要介绍了vue中实现图片压缩 file文件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue中当图片地址无效的时候,显示默认图片的方法
10-18
今天小编就为大家分享一篇vue中当图片地址无效的时候,显示默认图片的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue使用element-ui图片地址失效两种处理（替换和隐藏）
m0_46627730的博客
08-07 4564
文章目录前言处理方式一：替换二：隐藏三：继续思考 前言     相信很多人都会遇到图片地址失效导致无法显示图片，只显示几个字（加载失败），这样非常不美观。最近我在图片遍历显示时也遇到了其中一张图地址失效的问题，一堆图片中夹着一个加载失败，呃，感觉很不舒服，所以只能想办法解决。 处理方式 一：替换 有时候可以选择用一张图片替换地址失效的图片，这样可以保持原有结构并且保证美观。 <el-image :src="img.uRL" v-for="(img,in
Vue 图片加载失败，出现裂图或闪图
Harley567
02-13 699
图片加载失败后CSS样式处理最佳实践
VUE中(img)图片加载失败时(onerror)显示替换的图片
我的米饭
07-01 2365
需要使用img标签上的一个属性 onerror ，绑定一个本地图片地址，以下是VUE里的写法： HTML代码： <img alt="" :src="item.iconPath" :onerror="defaultImg" /> JS代码 export default { data () { return { defaultImg: 'this.src="' + require('@/assets/images/app_icon.png') + '"', } } } ...
vue打包时，背景图片失效解决方法
董小礼的博客
05-09 617
打开build目录下的utils修改             if (options.extract) {                  return ExtractTextPlugin.extract({                    use: loaders,                    publicPath:'../../',                    fa...
vue动态加载图片失效的问题
weixin_33840661的博客
09-03 631
首先先说明下vue-cli的assets和static的两个文件的区别，因为这对你理解后面的解决办法会有所帮助 assets：在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相对资源路径，将有webpack解析为模块依赖 s...
Vue项目中设置背景图片方法
01-21
在Vue项目开发中我们经常要向页面中添加背景图片，可是当我们在样式中添加了背景图片后，编译打包后，配置到服务器上时，由于路径解析的问题，图片并不能够正确的显示出来，如下CSS样式： background:url(../../...
Vue 中对图片地址进行拼接的方法
12-09
我们想要将它转化为正常的图片地址，需要使用for循环来将图片拼接起来 getSingList(){ getSingerList().then((res) =>{ if (res.code==ERR_ok){ this.singers=res.data.list console.log(this.singers) for...
python按关键字爬取必应高清图片
澄南澄北的博客
09-08 3681
通过查询前人的博客，发现必应可通过url按关键字查找图片： https://www.bing.com/images/async?q=查询关键字&first=图片编号&count=图片数量&mmasync=1 基于该url，我写了一个爬虫类，实现了按关键字下载固定数量的必应高清图片。调用时只需要一条python语句即可（由于使用了线程池并发请求图片，所以下载速度较快，一分钟300张高清图片没问题）： # 关键词：电脑壁纸 # 需要的图片数量：100 # 图片保存路径：'.
Vue项目打包后静态资源图片失效的问题
weixin_65356798的博客
08-03 930
解决vue项目打包之后静态资源图片失效的问题
Vue项目img标签图片加载失败/显示不成功，显示默认图片
06-04 6232
直接上正确代码,至于别人说的@οnerrοr=“url”，这种方法，亲测~~不可用 <img class="avatar" :src="docAvatar"> .avatar { width: 40px; height: 40px; position: relative; } .avatar:after { content: ""; displ...
vue 图片加载失败，加载默认图片方法
唯一的切慕，唯一的诗歌……
06-05 7920
template &lt;img :onerror="errorUserPhoto" :src="'Ecp.Picture.view.img?pictureId=' + head_pic" /&gt; script import userPhoto from '@/assets/images/userPhoto.jpg' data() { return { error...
vue中当图片地址无效的时候，显示默认图片
小圣贤君的博客
01-25 9451
web项目中经常需要展示图片，很可能就会碰到图片地址无效的情况，比如图片地址不对，或者后台拿到图片地址后，该地址无效，或者数据库中没有该图片等情况。这时候，图片就会显示一个叉。 对于项目中出现的这种情况，我们也可以不做处理，但是比较影响美观，所以我们都会使用一个默认的图片来代替图片原来的地址。 :src="item.img" @error="imgError(item)" /> 给图片添
前端|加载的图片太多或者太大怎么办(上)
热门推荐
u012496505的博客
06-27 3万+
摘要 web性能的终极目标是减少资源到客户端的延迟,但是我们在HTTP1.0/HTTP1.1协议中经常会遇到加载的图片太多或者太大导致页面加载完成慢的问题:图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长. 本篇将针对图片太多或者太大总结几种优化方案. 一.当图片太多时 方案一:将图片服务和应用服务分离(从架构师的角度思考) 对于
vue 项目中img标签加载失败默认样式解决
mkymab的博客
12-25 636
vue 项目中img标签加载失败默认样式解决 方法一： <img src=’’ :οnerrοr=’'defaultImg"/> 默认图片地址:defaultImg 方法二： < img src=“123” @error=“defImg()” /> 在defImg方法中对img标签进行操作
Vue项目，当接口图片无法显示，使用本地默认图片
无知者无畏
09-11 961
方法一：使用require方法 亲测没有效果（方法暂时保留） <img v-bind:src="userData.photo" :οnerrοr="logo" class="img-box4"> data: () => ({ logo: 'this.src="' + require('../assets/img.png') + '"' }) 参考链接：https://blog.csdn.net/qq_32786873/article/details/70161342 方
vue项目中 img标签加载失败方法，onerror事件的两种方法
qq_39882537的博客
05-18 2万+
vue项目中 img标签加载失败方法
vue中图片懒加载js代码
最新发布
05-14
Vue中可以使用第三方库vue-lazyload实现图片懒加载。具体步骤如下： 1. 安装vue-lazyload库 ``` npm install vue-lazyload --save ``` 2. 在main.js中引入vue-lazyload库并配置 ```js import Vue from 'vue' import App from './App.vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { preLoad: 1.3, // 预加载的高度比例 error: 'dist/error.png', // 图片加载失败时显示的图片 loading: 'dist/loading.gif', // 图片加载时显示的图片 attempt: 1 // 加载图片的尝试次数 }) new Vue({ el: '#app', render: h => h(App) }) ``` 3. 在template中使用v-lazy指令 ```html <template> <div> <img v-lazy="imgUrl" /> </div> </template> ``` 这样就可以实现图片懒加载了。当图片进入可视区域时，才会开始加载图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

随风小薇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值