ホームページ > 記事 > ウェブフロントエンド > vue2.0で動的にバインドされた画像のsrc属性値を初期化する際にエラーが発生する問題を解決
今回は、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 はネットワーク リクエストを通じて取得する必要があり、ページはおそらくレンダリングされているため、画像の src 属性値が「http」として解析されるたびに 404 エラーが表示されます。初期化時は ://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; } }, },
上記は私がまとめたものであり、将来的に皆さんのお役に立てれば幸いです。
関連記事:
vueのブラウザストレージメソッドのカプセル化例vueは保存後に終了を促すメソッドを実装angularプロジェクトでのbootstrap-datetimepicker時間プラグインの使用例以上がvue2.0で動的にバインドされた画像のsrc属性値を初期化する際にエラーが発生する問題を解決の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。