ホームページ  >  記事  >  ウェブフロントエンド  >  v-vue でローカル静的画像メソッドをロードするため

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

不言
不言オリジナル
2018-06-29 15:23:341779ブラウズ

以下は、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;);
}

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

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

関連する推奨事項:

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


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


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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。