ホームページ >ウェブフロントエンド >H5 チュートリアル >v-for を使用してローカルの静的イメージをロードする方法
今回は、v-for がローカルの静的画像をロードする方法と、v-for がローカルの静的画像をロードするための注意事項を説明します。以下は実際的なケースです。
vue-cli プロジェクト このmap ファイルは、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パスがブラウザに読み込まれているにもかかわらず、画像が表示されないことが後でBaiduで判明しました。 webpack パッケージが string に解析され、実際のパス
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.directive() の詳細な図解説明以上がv-for を使用してローカルの静的イメージをロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。