ホームページ > 記事 > ウェブフロントエンド > v-vue でローカル静的画像メソッドをロードするため
以下は、Vue で v-for を使用してローカルの静的画像を読み込む方法に関する記事です。非常に参考になるので、皆さんのお役に立てれば幸いです。
vue-cli プロジェクトのローカル イメージは、assets ディレクトリに配置されます (vue-cli の初期 vue イメージがその中にあるため、すべてのイメージがそこに配置されます)。画像パスを動的にロードします。問題が発生しました
ソースコード:
<ul> <li v-for="(item,index) in teamInfo" @click="trastFun(item)"> <p><img v-bind:src="item.imageurl"/></p> <p>{{item.name}}</p> <p>{{item.position}}</p> <p class="icon-vs">VS</p> </li> </ul> for(var i = 0;i<self.teamInfo.length;i++){ var j= i+1; self.teamInfo[i].imageurl = '../../assets/crop'+j+'.png'; }img の src パスがブラウザにロードされたにもかかわらず、後で画像が表示されないことが判明しました。 webpack パッケージが文字列に解析され、非実パス
が
for(var i = 0;i<self.teamInfo.length;i++){ var j= i+1; self.teamInfo[i].imageurl = require('../../assets/crop'+j+'.png'); }に変更されたことがわかりました。 もちろん、静的画像が最初に静的ディレクトリに配置されていた場合、そのような問題が起こらない可能性もあり、最初から配慮が足りませんでした。 以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 関連する推奨事項:
Vueを使用して動的にフォームを生成する入門
vue 画像をトリミングしてサーバーにアップロードする機能の紹介
以上がv-vue でローカル静的画像メソッドをロードするための詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。