解决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 相关文章推荐
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
javascript中的事件代理初探
Mar 08 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
js实现导航吸顶效果
Feb 24 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
解决layer图标icon不加载的问题
Sep 04 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
JavaScript中arguments的使用方法详解
Dec 20 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 url路由入门实例
2014/04/23 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
vue实现分页栏效果
2019/06/28 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python中Mako库实例用法
2020/12/31 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
岗位职责的含义
2013/11/17 职场文书
新闻发布会主持词
2014/03/28 职场文书
出国英文推荐信
2014/05/10 职场文书
品酒会策划方案
2014/05/26 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
阿凡达观后感
2015/06/10 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
诉讼和解协议书
2016/03/23 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript