vue で v-for を使用してローカルの静的画像をロードするメソッドを実装します (詳細なチュートリアル)

ここで、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 = &#39;../../assets/crop&#39;+j+&#39;.png&#39;;
}

img の src パスがブラウザにロードされたにもかかわらず、後で画像が表示されないことが判明しました。 webpack パッケージが文字列に解析され、非実パス

が

for(var i = 0;i<self.teamInfo.length;i++){
var j= i+1;
self.teamInfo[i].imageurl = require(&#39;../../assets/crop&#39;+j+&#39;.png&#39;);
}

に変更されたことがわかりました。上記は私がまとめたものです。未来。関連する記事：

vueプロジェクトは、動的に追加された要素のイベント関数を追加する不規則な多次元配列の実装のトラバースを実装するために、eslintvidification

jsメソッドをオフにします

以上がvue で v-for を使用してローカルの静的画像をロードするメソッドを実装します (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。