解决vue2.0动态绑定图片src属性值初始化时报错的问题
更新时间：2018年03月14日 09:44:12 作者：亲爱的混蛋
下面小编就为大家分享一篇解决vue2.0动态绑定图片src属性值初始化时报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在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属性值初始化时报错的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章简单给大家介绍了Vue项目中使用keep-Alive步骤，在vue2.1.0之前，实现方式也给大家作了简单介绍，感兴趣的朋友跟随脚本之家小编一起看看吧2018-07-07
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
这篇文章主要介绍了Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
关于element-ui日期时间选择器选不中12小时以后的时间详解
在之前做个一个组件页面中,引用了element-ui组件的日期选择器,遇到的一个小问题,下面这篇文章主要给大家介绍了关于element-ui日期时间选择器选不中12小时以后时间的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue中四种操作dom方法，首先，在vue中强烈禁用原生与jquery来操作DOM元素。我们要充分的利用vue的优势：MVVM，在vue中程序员几乎不操作DOM，只需要维护好数据即可，vue给程序员提供ref引用，不调用api直接获取元素组件的使用2023-02-02
这篇文章主要介绍了vue 通过绑定事件获取当前行的id操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
在日常使用Vue开发项目的时候，计算属性computed是一个非常常用的特性，本文就来分享一些使用Vue的computed计算属性时的一些小技巧，希望能够帮助到大家2023-06-06
这篇文章主要为大家介绍了vue如何封装一个高质量的表单通用组件方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最近遇到一个动态增加行和列的需求,所以这里给大家总结下,这篇文章主要给大家介绍了关于vue el-table实现动态添加行和列的相关资料,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue.js将时间戳转化为日期格式的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
最新评论