v-vue でローカル静的画像メソッドをロードするため

以下は、Vue で v-for を使用してローカルの静的画像を読み込む方法に関する記事です。非常に参考になるので、皆さんのお役に立てれば幸いです。

vue-cli プロジェクトのローカル イメージは、assets ディレクトリに配置されます (vue-cli の初期 vue イメージがその中にあるため、すべてのイメージがそこに配置されます)。画像パスを動的にロードします。問題が発生しました

ソースコード:

<ul>
<li v-for="(item,index) in teamInfo" @click="trastFun(item)">
<p><img  src="/static/imghwm/default1.png"  data-src="item.imageurl"  class="lazy"  v-bind:/ alt="v-vue でローカル静的画像メソッドをロードするため" ></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;);
}

に変更されたことがわかりました。 もちろん、静的画像が最初に静的ディレクトリに配置されていた場合、そのような問題が起こらない可能性もあり、最初から配慮が足りませんでした。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

Vueを使用して動的にフォームを生成する入門

vue 画像をトリミングしてサーバーにアップロードする機能の紹介

以上がv-vue でローカル静的画像メソッドをロードするための詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。