解决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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
javascript中的delete使用详解
Apr 11 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
终于实现了!精彩的jquery弹幕效果
Jul 18 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 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在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
js实现聊天对话框
2020/02/08 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
python检查指定文件是否存在的方法
2015/07/06 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
python实现泊松图像融合
2018/07/26 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
linux系统都有哪些运行级别
2012/04/15 面试题
应届生英语教师求职信
2013/11/05 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
节约用电通知
2015/04/25 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS