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() の詳細な図解説明

Node.js による Douban データの例のクロール

以上がv-for を使用してローカルの静的イメージをロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。