zoukankan      html  css  js  c++  java
  • Vue.js项目中,当图片无法显示时则显示默认图片

    Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法

    最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片

    本人试了3种方法,2种方法失败了(失败原因:图片定位失败

    失败方法一:

      见http://blog.csdn.net/qq_32786873/article/details/53483951

    失败方法二:

      直接把图片路径直接写在data里面作为变量传到模板中,但是却发现图片还是出不了,以为是图片路径的问题,

      查了半天才发现项目启动后图片的路径并不是我们写的路径了。比如我们写的图片路径是:../assets/img.png,

      但是在网页开发者工具查看时路径却是:/static/img/img.4aa0af1.png,也就是说图片路径是有变化的。

    解决方法(在方法二的基础上改进的):

      使用require将图片进入,写法如下:


      data: () => ({
        logo: 'this.src="' + require('../assets/img.png') + '"'
      })

    注:我是在data里就将字符串拼接好了,当然也可以在onerror方法里拼接,这里就不赘述了。

    然后在img的onerror方法中调用:


    <img v-bind:src="userData.photo" :onerror="logo" class="img-box4">

    在v-bind标签中,单引号' '引用的内容作为字符串存在;双引号" "引用的内容作为变量/表达式存在,可以进行运算。

  • 相关阅读:
    2117 poj 割点练习
    hdu 2767强连通分量练习
    hdu 1301 kruskal 最小生成树
    hdu 1523 求割点和块
    hdu 1207Arbitrage 最短路劲
    hdu 1874 畅通工程续
    求最小点基 poj 1236
    Hdu 1301 prim算法 生成最小生成树
    我眼中的性能测试工程师
    Web系统的测试
  • 原文地址:https://www.cnblogs.com/zhusf/p/10870422.html
Copyright © 2011-2022 走看看