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

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

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

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

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

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

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. Python 编码的一些问题

    >>> ord('中') 20013 >>> chr(65) 'A' >>> chr(20013) '中' - Python文件默认是UTF-8编 ...

  2. 分布式系统session同步解决方案

    来源:架构师之路 session的概念 什么是session? 当浏览器端第一次访问web server时,server端会调用getSession()方法创建session对象,经过特殊算法计算出s ...

  3. java 异步查询转同步多种实现方式：循环等待，CountDownLatch，Spring EventListener，超时处理和空循环性能优化

    异步转同步 业务需求 有些接口查询反馈结果是异步返回的,无法立刻获取查询结果. 正常处理逻辑 触发异步操作,然后传递一个唯一标识. 等到异步结果返回,根据传入的唯一标识,匹配此次结果. 如何转换为同步 ...

  4. 自定义Windows右击菜单调用Winform程序

    U9_Git中ignore文件处理 背景 U9代码中有许多自动生成的文件,不需要上传Git必须BE Entity中的.target文件 .bak 文件 Enum.cs结尾的文件,还有许多 extand ...

  5. html+css常用小笔记（持续更新）

    1 去掉input点击时的蓝色边框 outline:none; 2 禁止文本选中 -webkit-touch-callout: none; /* iOS Safari */ -webkit-user- ...

  6. LeetCode 86. Partition List 划分链表 C++

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

  7. visual studio 2013 几个测试工具（Nunit 3、xUnit）

    一.Nunit 3 1.在解决方案里添加一个类库——引用——右键(如下图)) 3.搜索nunit 并安装(如图) 3.注意引入命名空间并给测试类和测试方法添加特性(如图) 4.如果测试通过则为绿色(如 ...

  8. 算法之Python实现 - 002 ： 换钱的最少货币数补充（每种货币只能使用一次）

    [题目]:给定数组arr,arr中所有的值都为正数且不重复.每个值代表一种面值的货币,每种面值的货币仅可以使用一张,再给定一个整数aim代表要找的钱数,求组成aim的最少货币数. [代码1]:时间与额 ...

  9. vue中的一些知识点--多看文档

    重温vue,一些知识点简单记录. 1.我们都知道当数据变化时,视图会重新渲染.注意:只有当vue实例被创建时,data中存在的属性才是响应式的.后续新添加的属性不会触发视图变化. 使用 Object. ...

  10. [转] ADO.NET调用存储过程带输出参数或返回值

    CREATE PROCEDURE [dbo].[GetNameById] @studentid varchar(), @studentname nvarchar() OUTPUT AS BEGIN S ...