解决vue2.0动态绑定图片src属性值初始化时报错的问题


Posted in Javascript onMarch 14, 2018

在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例

<template>
  <div>
    <img :src="imgUrl">
  </div>
</template>
<script>
export default {
  data(){
    return {
      captcha_id: "" 
    }
  },
  computed: {
    imgUrl(){
      return ' http://www.demo.com/static/ '+ this.captcha_id + '.png'
    },
  },
  methods: {
    init(){
        // 此处省略一个请求 ,假设成功返回数据为 res
        this.captcha_id = res.data.captcha_id;
    },
  }  
  created(){
    this.init();
  }
}
</script>
<style lang="scss" scoped>
</style>

如以上案例,由于数据字段 captcha_id 需要通过网络请求取得,而页面很可能已经渲染完成,结果导致每一次加载都会出现404错误,

其中图片的src属性值初始化时被解析为 ' http://www.demo.com/static/.png' 。

解决方式如下:

computed: {
    imgUrl(){
      if(this.captcha_id){
        return this.$store.state.cmnUrl +'/v1/cmn/captcha/new/' + this.captcha_id + '.png'
      }else{
        return null;
      }
    },
  },

以上这篇解决vue2.0动态绑定图片src属性值初始化时报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
react以create-react-app为基础创建项目
Mar 14 #Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 #Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 #Javascript
JavaScript实现区块链
Mar 14 #Javascript
iview table render集成switch开关的实例
Mar 14 #Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 #Javascript
Vue.js 动态为img的src赋值方法
Mar 14 #Javascript
You might like
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
利用Console来Debug的10个高级技巧汇总
2018/03/26 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
python 常用的基础函数
2018/07/10 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
python 类之间的参数传递方式
2019/12/20 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
python 深度学习中的4种激活函数
2020/09/18 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
大学生个人事迹材料
2014/01/21 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
高中生学习计划书
2014/09/15 职场文书
云冈石窟导游词
2015/02/04 职场文书
骨干教师个人总结
2015/02/11 职场文书
行政复议决定书
2015/06/24 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang