前端处理无网络兜底图片展示

前言:最近公司要求活动页面增加无网络的兜底页面,主要有图片和文字组成,但是在开发过程中发现在无网络情况下,文字可以正常展示,但是图片无法加载出来,原因呢其实是首页在网页中,对于图片的加载,其实试一次http请求,而请求在无网络的情况下是无法完成的,所以导致图片加载不出来。但是图片展示不了,这也就失去了这个页面的作用,我们改怎么办

解决思路

既然文字可以加载出来,说明html在无网络也是可以加载的,那么我们其实可以吧图片转成base64编码的格式写在代码中,这样不就可以显示嘛

<template><!-- template have only one root node --><div class="components connectionLessWrap "><img :src="imgIcon"class="connectionLess" /><!-- change Chinese to English --><div class="tip">{{ tip ||'' }}</div><slot></slot></div>
</template><script lang="ts">
'use strict';
import { getActId, getQueryString, jsonpFn, clearHttpProtocol, isString } from '@act-lib/utils';
import { makeToast, isThemeDownload, openActivity, isInstalled } from '@act-lib/js-bridge';
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
@Component({name: 'NoContent'
})
export default class NoContent extends Vue {imgContentUrl = require('./noContent.png');//无网络图片,转成base64格式,防止请求失败导致无法加载imgConnectionUrl = 'data:image/png;base64,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';/**Prop */@Prop({ type: Boolean, default: false }) isShowNoContentImg: boolean;@Prop({ type: String, default: '' }) tip: string;/**computed */private get imgIcon() {if(this.isShowNoContentImg) {return this.imgContentUrl;}else{return this.imgConnectionUrl;}}/**lifecycle */private mounted() {}/**method */
}
</script>

前端处理无网络兜底图片展示相关推荐

  1. 有赞前端 UI框架「Vant」在离线无网络环境中使用 icon 无法显示的问题

    有赞前端 UI框架「Vant」在离线无网络环境中使用 icon 无法显示的问题 第一次使用这个框架.UI组件中规中矩,很简洁,不是特别多,基本够用.Vant 官网 在内网中部署 Vue+Vant的项目 ...

  2. 用python实现数字图片识别神经网络--启动网络的自我训练流程,展示网络数字图片识别效果

    上一节,我们完成了网络训练代码的实现,还有一些问题需要做进一步的确认.网络的最终目标是,输入一张手写数字图片后,网络输出该图片对应的数字.由于网络需要从0到9一共十个数字中挑选出一个,于是我们的网络最 ...

  3. 前端点滴(网络协议/HTML/前端优化/浏览器)

    前端点滴(网络协议/HTML/前端优化/浏览器)---倾尽所有 网络协议/HTML/前端优化/浏览器 IOS七层模型 网络协议 一. HTTP与HTTPS协议 (1)http与https概述 (2)h ...

  4. 3d环形图片展示 js_网易公开课Three.js实践 勋章系统

    前言 WebGL是一种3D绘图协议,这种绘图协议允许javascript和openGL结合起来,WebGL可以为canvas提供3d硬件加速(使用GPU在浏览器渲染3d模型和场景).WebGL是ope ...

  5. 前端性能优化之优化图片

    转载自:http://www.cnblogs.com/zhuzhenwei918/p/6935426.html 前端图片优化一直以来都是热门话题,从需求上来看,很多站点往往是图片体积大于代码体积, 图 ...

  6. java计算机毕业设计-图片展示及购买网站-源程序+mysql+系统+lw文档+远程调试

    java计算机毕业设计-图片展示及购买网站-源程序+mysql+系统+lw文档+远程调试 java计算机毕业设计-图片展示及购买网站-源程序+mysql+系统+lw文档+远程调试 本源码技术栈: 项目 ...

  7. java计算机毕业设计-图片展示及购买网站-源码+数据库+系统+lw文档+mybatis+运行部署

    java计算机毕业设计-图片展示及购买网站-源码+数据库+系统+lw文档+mybatis+运行部署 java计算机毕业设计-图片展示及购买网站-源码+数据库+系统+lw文档+mybatis+运行部署 ...

  8. MVP模式在Android中的应用之图片展示选择功能的框架设计

    前言:虽然安卓出现的时间比其它平台软件比较晚,但是在我们的安卓开发中,一样可以使用我们所熟知的设计模式来给它一个合理.完善的结构,这样,才可以使我们在平常开发的时候减少冗余代码的发生,真正的提高效率. ...

  9. div 隐藏_CSS实现六边形Div图片展示效果

    一. 效果图 二. 六边形效果涉及到的知识点 1. transform: rotate(120deg); // 元素旋转 2. overflow: hidden; // 超出隐藏 3. visibil ...

  10. java读图片显示到前端_java从前端获取参数添加到图片后返回整张图片

    java从前端获取参数添加到图片后返回整张图片 以后为整个servlet代码,请自行加入到j2ee工程. import java.awt.Color; import java.awt.Font; im ...

最新文章

  1. eas 在linux下安装_Linux下SVN的安装以及配置
  2. 小余学调度:学习记录(2021.9.13-2021.9.19)母线操作和线路操作
  3. JAVA-初步认识-第八章-继承-单继承和多重继承
  4. @Nullable 注解的用法
  5. C语言sizeof和strlen的含义,用法和区别
  6. 女孩和程序员相亲,吃饭消费了380,他没结账就先走,晚上收到微信愣了
  7. 应用安全测试的发展趋势
  8. f1c100s rootfs调试记录
  9. 计算机硬盘搜索记录,怎么清除Win7搜索记录 Win7搜索历史记录删除教程
  10. 引导工业物联网变革 中国占据有利位置
  11. p3110 二叉堆练习3--排序
  12. Web大学生网页成品——英雄联盟LOL游戏网站制作与实现(HTML+CSS+JS)
  13. srgb色彩空间_网页设计师的色彩:了解sRGB
  14. .NET开发邮件发送功能的全面教程(含邮件组件源码)
  15. python输出间隔符_python print 使用分隔符 或行尾符
  16. 一夜撸700万,羊毛党不光薅羊毛,还吃羊肉吸羊血。
  17. AC Leetcode 290. 单词规律
  18. 13、hive在启动beeline客户端时报错:User: xxx is not allowed to impersonate xxx
  19. 记一次小米2S的刷机过程
  20. jenkins首次安装,该Jenkins实例似乎已离线等报错的解决方案

热门文章

  1. Selenium中的鼠标单击事件
  2. python图像隐写_【快速跟水】图像隐写的python实现
  3. 为什么开发效率这么低,时间都去哪了?
  4. oracle01004,Oraclegoldengate的OGG-01004OGG-1296错误
  5. SpringBoot 无法捕获 maximum upload size exceeded
  6. linux运行崩溃怎么定位,Linux 程序崩溃定位
  7. What Makes a Video a Video :Analyzing Temporal Information in Video Understanding Models and Dataset
  8. python爬虫(十三)selenium(Selenium入门、chromedriver、Phantomjs)
  9. C# Control.Refresh的解释是什么意思?
  10. 深度学习论文: Avoiding Overfitting: A Survey on Regularization Methods for Convolutional Neural Networks