精华内容
参与话题
问答
  • 使用原生img标签,src用v-bind动态绑定本地的url,由于图片放在了assets文件夹下,所以代码大致长这样: <template> <img :src="url"> </template> <script> //... data() { return {...

    问题描述

    使用原生img标签,srcv-bind动态绑定本地的url,由于图片放在了assets文件夹下,所以代码大致长这样:

    <template>
    	<img :src="url">
    </template>
    
    <script>
    	//...
    	data() {
    		return {
    			url: "../assets/charts.jpg"
    		}
    	}
    </script>
    

    但打开浏览器看效果时却发现图片加载失败
    遂谷歌

    解决方案

    这篇文章(https://www.cnblogs.com/ranyonsue/p/11608760.html)说得比较详细,主要是我们写的相对路径是相对于项目的根目录,而浏览器解析时会把根域名作为相对路径的根目录,所以图片才会加载失败。
    采用文章中提到的方法,把图片放到了static文件夹下,就加载成功了。
    不过这个带来的图片资源优化问题后续还需要解决,所以之后会尝试一下文章中提到的第三种方法。

    展开全文
  • Vue图片加载失败处理方法

    千次阅读 2019-10-16 13:50:43
    Vue项目中 img 加载失败 场景:有些时候后台返回图片地址不一定能打开,所以这个时候应该加一张默认图片 // page 代码 <img :src="imgUrl" @error="handleError" alt=""> <script> export default{ data...

    Vue项目中 img 加载失败

    场景:有些时候后台返回图片地址不一定能打开,所以这个时候应该加一张默认图片

    // page 代码
    <img :src="imgUrl" @error="handleError" alt="">
    <script>
    export default{
      data(){
        return{
          imgUrl:''
        }
      },
      methods:{
        handleError(e){
          e.target.src=reqiure('@/assets/images/default.png') 
        }
      }
    }
    </script>
    
    
    
    展开全文
  • 之前写页面考虑不到什么占位图,这次UI设计都有一个占位图,不得不逼着自己更准确的考虑图片显示错误时的情况! 1、期初,想着用背景来填充,如果图片显示则就自然而然的把背景图遮盖住了,可实际情况是,如果后台...

    之前写页面考虑不到什么占位图,这次UI设计都有一个占位图,不得不逼着自己更准确的考虑图片显示错误时的情况!

    1、期初,想着用背景来填充,如果图片显示则就自然而然的把背景图遮盖住了,可实际情况是,如果后台返回的图片有误不显示时,背景图上面还是会有一个破损的小图片显示不美观;

    background: url("../../../static/images/avaterSpaceMap.png");
    background-size: 100% 100%;
    

    在这里插入图片描述
    2、接着又想着用三元运算符来判断,有值就显示,没值为空时就显示占位图,如是:

    :src="reportMsg.userAvatarUrl ?reportMsg.userAvatarUrl : require(../../../static/image/img.png)"
    

    但是这么显示有一个缺点就是,如果后台也返回图片的地址了,但就是404 找不到,是错误的地址,我们就没有办法了。

    3、最后百度看到img 有一个onerror属性,就可以完美解决上述的问题

    <img class="studentImg" :src="reportMsg.userAvatarUrl" onerror="this.src = '../../../static/images/avaterSpaceMap.png'" />
    

    相关前端的问题持续更新,小伙伴们相互关注,一同学习哦

    展开全文
  • el-image组件加载失败默认如下图:(这不是想要的结果,我想要真正加载成功的图!!!) 失败的原因最大的可能就是网速不给力、页面图片太多同时请求队尾的图片请求超时等。解决方案是请求失败的图片重新发起请求!...

    基于vue+element Image组件
    el-image组件加载失败默认如下图:(这不是想要的结果,我想要真正加载成功的图!!!)
    在这里插入图片描述
    失败的原因最大的可能就是网速不给力、页面图片太多同时请求队尾的图片请求超时等。解决方案是请求失败的图片重新发起请求!

    el-image结构代码如下:(循环生成的多张图片,同样适用于单张图片,不过单张图片无需如此麻烦)
    在这里插入图片描述

    <div v-for="(item, index) in imgList" :key="item">
      <el-image :src="item" @error.once="srcerr(item, index)"></el-image>
    </div>
    

    vue项目error方法绑定once,为避免同一个失败链接无限触发error

    定义好的测试数据:
    在这里插入图片描述

    imgList: [
      'http://10.5.4wei1/data/mvtec_ad/grid/train/good/075.png',
      'http://10.5.4che/liwei1/data/mvtec_ad/grid/train/good/207.png'
    ],
    errobj: {}
    

    图片加载失败后触发error的函数:(没有注释,乱七八糟,下面会详细讲解每一句存在的意义)

    在这里插入图片描述

    srcerr(item, index) {
      if (/^err/.test(this.imgList[index])) {
         this.$set(this.imgList, index, this.imgList[index].slice(3))
       } else {
         if (!this.errobj[item]) {
           this.errobj[item] = 1
         } else {
           if (this.errobj[item] > 2) {
             return
           } else {
             this.errobj[item] += 1
           }
         }
         this.$set(this.imgList, index, 'err' + item)
       }
     }
    

    下面注释枯燥乏味,可以不看,直接复制上边代码使用没什么不可以

    1. 首先,图片加载失败后会触发标签绑定error的函数srcerr,srcerr接收到的参数不必解释,必须要传,有用;
    2. /^err/.test(this.imgList[index])(注意这里匹配的不是item,下面你会明白为什么)判断该图片的链接是否以err开头,第一次触发error当然不是了
    3. 那么执行this.set(this.imgList, index, ‘err’ + item),当然err是自己拼接上去的,你可以拼接成任何你喜欢的东西只要和真正图片路径开头不一致即可。
    4. 这时imgList列表更新重新赋值失败图片的src,当然这次一定会再触发error,因为链接上拼接了err
    5. 这次会执行if里的语句this.set(this.imgList, index, this.imgList[index].slice(3)),把截掉err的链接重新赋值回imgList,imgList更新又赋值链接给图片,到目前为止该图片已经重新请求了一次正确的地址,正常情况下图片会成功渲染。
    6. 但是,万一链接本身是错误的,就像上边imgList里的数据是不可能请求到图片的。。。
    7. 如此,就会陷入循环地狱,once只能对同一个错误拦截,拼接err链接改变了下一次又截取掉了,所以会无限循环下去,之前一切的努力都付之一炬了。。。
    8. 执行报错函数else条件里的判断就是解决这个问题的,,!this.errobj[item]判断data里定义好的errobj对象里是否存在该条链接,不存在则保存在errobj里对应的值为1。
    9. errobj里存在该链接则判断其值,这里条件为大于2则return掉,否则其值加1,这样的话加载失败的链接无论失败多少次(除了首次),都有最多3次请求的机会,超过3次链接不会拼接err,失败的error就不会再触发。
    10. 使用errobj对象保存每条加载失败的链接好处就是无论页面有多少图片加载失败,每一张都还有3次加载的机会,也能解决掉循环地狱的问题。
    11. 如果你的网速超慢,请求3次都不成功,那么可以尝试条件放大点,请求5次10次。如果还失败,建议不要做无谓的挣扎了,毕竟一张图片单独请求10次还不成功,怀疑它是不是图片。

    补充一条:为什么要拼接err再截取掉,而不是直接赋值当前链接。原因是直接赋值请求失败图片的链接和赋值的链接一模一样,由于vue机制的限制,修改的数据和原数据相同,那么数据不会更新,数据不更新页面el-image标签就不会接收到新的src,组件内部就不会触发更新img的src,所以中间多传递一次错误的src是为了下一次赋值正确src的时候可以触发视图更新。

    项目中需要展示的图片超多,经常会出现加载失败的情况,记录该问题解决方案。
    此文章只提供类似问题解决方案,代码仅供参考,如有不妥欢迎留言指教!

    展开全文
  • 直接上正确代码,至于别人说的@οnerrοr=“url”,这种方法,亲测~~不可用 <img class="avatar" :src="docAvatar"> .avatar { width: 40px; height: 40px; position: relative;... displ...
  • vue图片加载失败默认图片

    千次阅读 2019-06-18 16:30:24
    css解决方案: img { position: relative; } img:after { content: url('替代圖片'); display: block; position: absolute; z-index: 2; top: 0; left: 0; width: 100%;... background-co...
  • template &lt;img :onerror="errorUserPhoto" :src="'Ecp.Picture.view.img?pictureId=' + head_pic" /&...import userPhoto from '@/assets/images/userPhoto.jpg' ...
  • function install(Vue, options = {}) { /** * 检测图片是否存在 * @param url */ let imageIsExist = function (url) { return new Promise((resolve) => { var img = new Image(); img.onload = ...
  • 图片加载过程出错了没加载数来,就会触发img标签的onerror事件,可以使用一张默认的提示错误的图片代替显示不了的图片。 <img :src="item.product_images?item.product_images:'src/assets/images/kong.png'" ...
  • 背景:业务开发时遇到一个需求,在图片加载失败时,显示默认占位图片,应为以前没有接触过,所以记录下解决方式。 知识点:onerror 事件会在文档或图像加载过程发生错误时被触发。 代码: <template> &...
  • Vue 图片加载失败, 显示默认图片

    千次阅读 2019-01-25 17:09:47
    后台返回图片 访问404, 如果只用v-if , 图片加载出来 还是会留个空位置在, 给 img 加上 onerror 属性就可以了,简单粗暴, 暂时没什么问题 后面找到更有效的 方法,在vue里面使用: <div class=...
  • vue中加载图片失败显示默认图片 亲测有效 别找别的了都是坑要么死循环要么就是一直执行error <img :src="logoSrc" @error="defaultImgs()"> //亲测有效 ...
  • 原理就是给img绑定error事件,替换原有的src地址。...首先在data创建一个defaultImg(随便起的),里面的值是该默认图片的地址; 在html页面的img标签上绑定该属性 这样默认图片就设置好了; ...
  • 比如后台返回的一个图片字段pic,...这个判断只能判断pic是否存在,只有pic=''的情况下,才回显示设置的默认图片,但是如果pic这个字段是有值的呢,并且是一个错误的值,或者一个找不到的404的图片呢?这个时候就要...
  • 在index.html里面标头默认不使用外部资源,所以在复制cordova的index.html到vue项目的index.html,要注意以下代码: &lt;meta http-equiv="Content-Security-Policy" content="* gap://ready...
  • vue项目,我们引用图片组件 el-image 绑定路径会提示加载失败,如下图所示 <el-image class="zuipinImg" src="@/assets/photo.png" :preview-src-list="zuopinsrcList"> </el-image> 解决...
  • 说到图片加载失败,我们都会想到这样处理 <img src="/img/covers.png" alt="封面" onerror="javascript:this.src='/img/default.png'"> 这样处理没问题,但如果放到项目,几十上百个页面,一个一个加,...
  • VUE打包图片加载失败问题

    千次阅读 2018-07-23 12:00:37
     问题描述,使用VUE-CLI打包后,出现图片无法显示情况。这里可能存在两种情况: 静态资源CSS使用图片作为背景图片使用时。 在JS生成图片标签后,再设置图片路径时。  当你吃着火锅唱着歌,一路npm-run-dev都...
  • Vue H5项目图片加载错误,需要给图片一个默认的配图,如图: 如果不给默认图片的话会是这样,如图: 这样是不是很丑,哈哈哈哈! 那么我们应该怎么处理呢? 上码: <img :src="图片地址变量" ...
  • //全局注册自定义指令,用于判断当前图片是否能够加载成功,可以加载成功则赋值为img的src属性,否则使用默认图片 Vue.directive('real-img', async function (el, binding) {//指令名称为:real-img let imgURL = ...

空空如也

1 2 3 4 5 ... 20
收藏数 6,238
精华内容 2,495
关键字:

vue 图片加载失败

vue 订阅