下面我就為大家分享一篇解決vue2.0動態綁定圖片src屬性值初始化時報錯的問題,具有很好的參考價值,希望對大家有所幫助。
在vue2.0中,常常會使用類似這樣的語法v-bind:src = " imgUrl "(縮寫:src = " imgUrl "),看一個案例
#<template> <p> <img :src="imgUrl"> </p> </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; } }, },
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
angular專案中bootstrap-datetimepicker時間外掛程式的使用範例
#
以上是解決vue2.0動態綁定圖片src屬性值初始化時報錯的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!