面对这个问题 我最多做到表面笑嘻嘻 ……

真不知道测试怎么那么…… 啥都能给你测出来 有的没的都能给你测出来

算了算了  谁让本仙女本精灵本可爱温柔大方善解人意呢 …呵呵呵

————————————正文开始了————————————

这是一个动态更换登录页面背景图的功能

但是如果客户的相对应的文件夹没有更换过图片的话 就要有默认显示的图片

logoBg就是默认显示的图片

logoUrl是客户更换的背景图

最初的代码是这个样子的

工具文件:

html引入

import {validateImage} from "@/utils/auth";

import loginBg from "../images/common/bg_login2.jpg";

data:

呵呵呵呵  大功告成

然鹅……………… 测试什么都能给你测出来 本来是缓存搞得问题  后来升级到你这个图片刷新就没了

我……………………

于是乎开始找原因,找来找去 我svn也提交了两个版本的代码

但是后来都不行

焦躁的我睡觉都睡不好

于是 今天赢img标签代替 也是可以用的 img中有一个onerror事件

不过这个方法要拼接  我拼了一会 放弃了 直接用自己ip测试 发现可以用

(这个方法改天再说,因为我着急回去超市……嘻嘻嘻)

但是还有一种方法 也是离不开img的onerror

data里面我直接让logoUrl:loginBg,

大功告成 我让你刷新 让你一直刷新 就是不会变 啦啦啦

百度了很多方法  都没用 不知道是不是因为我太美了  哈哈哈哈

反正这个方法可以用 如果你也遇到了我的问题 希望可以帮助到你

如果你看到了这里 说明你对我的认可 然后 给你一个么么哒~~~

阿里嘎多~~

————补充————

在你的methods的方法中 this.loginBg 的值(图片的路径)一定要用import

不然webpack打包的时候是打包不进去的

我做的时候就忽略了这个问题 导致测试新版本的时候跟没改一个样

所以提醒你们注意这个问题哦~~~

JS判断图片是否加载完成 背景图404 快到碗里来的更多相关文章

  1. JS判断图片是否加载完成三种方式

    1.img的complete属性 轮询不断监测img的complete属性,如果为true则表明图片已经加载完毕,停止轮询.该属性所有浏览器都支持. <p id="p1"&g ...

  2. js 判断图片是否加载完成(使用 onload 事件)

    我们在写 jquery 的时候一般都会写 $(document).ready,加载完成事件还有一个就是 onload onload 与 ready 的区别是: 1.ready 是 DOM 加载完成的事 ...

  3. js判断图片是否加载完毕

    附件: https://www.jb51.net/article/102385.htm 问题:  .offset().top和$(window).scrollTop()每次刷新页面后滚动的值有时候会不 ...

  4. js判断图片是否加载完成

    var img = new Image(); //新建一个图片对象:img.src = ...; //图片地址是你准备要加载的地址:if(img.complete){ //表示图片已经加载完成}

  5. js判断图片是否加载成功

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 关于JS判断图片是否加载完成且获取图片宽度的方法

    做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处 ...

  7. js 判断图片是否加载完成

    1.根据url来加载图片: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /**  * 加载图片,直到加载完成后才调用回调函数  * @param url 后面读取图片流的u ...

  8. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  9. 【转】JS判断SWF,JPG加载完毕、兼容(Activex,plugIn)所有浏览器

    JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...

随机推荐

  1. 嵌入式 printf函数

    来自:https://www.cnblogs.com/02xiaoma/archive/2012/06/22/2558618.html #include <stdio.h> #includ ...

  2. 记一次bond引起的网络故障

    本案中3个关键服务器 物理服务器:192.168.6.63,简称P,(Physical server) KVM-VM:192.168.6.150,是物理服务器P上的一个KVM虚机,简称VM NAS:外 ...

  3. springboot vue简单整合

    1.vue项目 (1)修改config/index.js (2)执行 npm run build 生成静态文件,在dist目录 2.springboot项目 (1)在src/main/resource ...

  4. Exp2 后门原理与实践 - 20164304 姜奥

    实验内容  (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启动 (3)使用MSF meterpreter(或其他软件)生成可执行文件 ...

  5. mybatis运行原理学习

    一.分步骤分析 1.根据配置文件创建SqlSessionFactory: 解析文件的每一个信息保存在Configuration中,返回包含Configuration的DefaultSqlSession ...

  6. junit,面向切面开发(动态代理),工厂设计模式,数据库连接池

    1.junit junit又叫单元测试,好处是能进行批量测试,而且如果方法出现了问题能立刻定位出出现问题的方法,还有一个好处是感官效果很好,如果方法都通过了则显示绿条,否则显示红条 TestCase. ...

  7. delphi frame 添加 create onshow 事件

    delphi frame  添加 create onshow 事件 https://www.cnblogs.com/Gufan/archive/2011/09/06/2538932.html proc ...

  8. ReactiveX 学习笔记(27)使用 RxJS + Vue.js 进行 GUI 编程

    课题 程序界面由3个文本编辑框和1个文本标签组成. 要求文本标签实时显示3个文本编辑框所输入的数字之和. 文本编辑框输入的不是合法数字时,将其值视为0. 3个文本编辑框的初值分别为1,2,3. 创建工 ...

  9. COM接口调用,CreateDispatch失败的问题

    有一个自动化处理Office文档的程序,原本运行的很好,基于效率和UI效果的问题,改成了多线程处理,编译没问题,一运行就报错找不到Office软件. 程序中产生错误的地方就是创建COM对象失败,以前好 ...

  10. 不同应用共享redis应用,但分数据库存储数据

    日常开发工作中,常常遇到这种情况 项目A ,需要使用redis 项目B ,也需使用redis …… 原来傻乎乎的在服务器上装几个redis,通过不同的端口号来进行使用 其实redis可用有16个数据库 ...