在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屬性值初始化時報錯的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
