画像がループに表示されないVue.js [重複]
を使用して、9つの異なる画像をループで表示しようとしていますv-for。
しかし、それらは表示されていません。ループなしで表示すると動作します。
適切なリソースを抽出していますが、それでも表示されません。
これは私のコードです：
<img class="list-complete-img" src="../assets/g1.jpg" alt="" /> //This works
<div v-for="item in data.items" :key="item.id">
<div>
{{ item.src }} // Just to check if I am printing right
</div>
<img class="list-complete-img" :src="item.src" :alt="item.src" /> // This does not work
</div>
今私が得ている結果は次のとおりです。
これは私のdata.jsonです：
"items": [
{ "id": "1", "src": "../assets/g1.jpg", "tags": ["all", "tag1"] },
{ "id": "2", "src": "../assets/g2.png", "tags": ["all", "tag2"] },
{ "id": "3", "src": "../assets/g3.png", "tags": ["all", "tag2"] },
{ "id": "4", "src": "../assets/g4.png", "tags": ["all", "tag1"] },
{ "id": "5", "src": "../assets/g5.png", "tags": ["all", "tag1"] },
{ "id": "6", "src": "../assets/g6.png", "tags": ["all", "tag2"] },
{ "id": "7", "src": "../assets/g7.jpg", "tags": ["all", "tag1"] },
{ "id": "8", "src": "../assets/g8.png", "tags": ["all", "tag2"] },
{ "id": "9", "src": "../assets/g9.png", "tags": ["all", "tag2"] }
]
編集
これまでのところ、問題はにあることを確認しましたsrc。画像リンクを使用している場合は、問題なく機能しています。ただし、ローカルイメージではありません（ループでローカルイメージの束を使用し、単一で正常に機能している場合のみ）。だから、私にできることはここにファイルディレクトリを置くことです。誰かがあなたのローカルコンピュータで試してみて、ループであなたのファイルディレクトリから画像をアップロードしてここに投稿することができるなら、私はお勧めします。
解決済み
次のステートメントが正確に必要でした：require、パスディレクトリとイメージ名。
<div v-for="item in items" :key="item.id">
<div>
{{ item.src }}
</div>
<img
class="list-complete-img"
:src="require(`../assets/${item.src}`)"
:alt="item.src"
/>
</div>
回答
これは、Evan Youの次の引用と関係があります。これは、ここにあります。
imagePathは実行時にVueによってのみレンダリングされるため、Webpackはそれを書き換える可能性がありません。
あなたのJavaScriptコードは次のようにする必要があります：
export default {
name: "App",
data: function () {
return {
items: [
{ id: "1", src: "logo.png", tags: ["all", "tag1"] },
{ id: "2", src: "logo.png", tags: ["all", "tag2"] },
{ id: "3", src: "logo.png", tags: ["all", "tag2"] },
{ id: "4", src: "logo.png", tags: ["all", "tag1"] },
{ id: "5", src: "logo.png", tags: ["all", "tag1"] },
{ id: "6", src: "logo.png", tags: ["all", "tag2"] },
{ id: "7", src: "logo.png", tags: ["all", "tag1"] },
{ id: "8", src: "logo.png", tags: ["all", "tag2"] },
{ id: "9", src: "logo.png", tags: ["all", "tag2"] },
],
};
},
methods: {
getImgUrl: function (imagePath) {
return require('@/assets/' + imagePath);
}
}
};
その後、getImgUrlファイル名を渡して関数を呼び出す必要があります。あなたHTMLはこのようになります：
<div id="app">
<img class="list-complete-img" src="./assets/logo.png" />
<div v-for="item in items" :key="item.id">
<img class="list-complete-img" :src="getImgUrl(item.src)" />
</div>
</div>
私はあなたの画像にアクセスできないので、Vueのロゴを画像として自由に使用しました。
要約すると、上記の問題は、Vueコンパイル時にすべてのアセットを取得し、それらを下の画像のような別のフォルダーに配置する必要があります。
このパターンに従うと、あなたの例も機能します。楽しい！
編集：必要に応じて、静的アセットをパブリックフォルダーに配置できます。このようにして、アセットの静的パスを作成できるようになります。
これを試して： v-for="(item, i) in items" :key="i"
動的画像を使用するには、require（）を使用します。あなたが持っているものをこれに変えてください。
<div id="app">
<div v-for="item in data.items" :key="item.id">
<img ... :src="require(item.src)" />
</div>
</div>あなたは私が間違っているなら私を訂正するのを助けるかもしれないforループを使うことができます