Döngü Vue.js'de görüntülenmeyen resim [kopya]
Kullanarak bir döngüde 9 farklı görüntü görüntülemeye çalışıyorum v-for
.
Ama görünmüyorlar. Herhangi bir döngü olmadan gösterirsem işe yarıyor.
Doğru kaynağı çıkarıyorum ama yine de görüntülenmiyor.
Bu benim kodum:
<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>
Şimdi elde ettiğim sonuç:

Bu benim 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"] }
]
DÜZENLE
Şimdiye kadar sorunun src
. Bir resim bağlantısı kullanıyorsam, gayet iyi çalışıyor. Ancak, yerel bir görüntüyle değil (yalnızca bir döngüde bir dizi yerel görüntü kullandıysam ve tek olarak iyi çalışsaydım). Yani, yapabileceğim şey dosya dizinini buraya koymak. Herhangi birinizin yerel bilgisayarınızda deneyip dosya dizininizden görüntüleri bir döngü içinde yüklemeyi ve buraya göndermesini tavsiye ederim.


ÇÖZÜLDÜ
Bu ifadeye tam olarak ihtiyacı vardı:, require
yol dizini ve görüntü adı.
<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>
Yanıtlar
Bu sorun bulunabilir Evan You aşağıdaki alıntı, ile ilgisi var olduğunu burada :
İmagePath yalnızca çalışma zamanında Vue tarafından oluşturulduğundan, Webpack'in onu yeniden yazma şansı yoktur.
Kişisel JavaScript
kod aşağıdaki gibi olması gerekir:
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);
}
}
};
Daha sonra, getImgUrl
dosya adını ileterek işlevinizi çağırmanız gerekir . Sizin HTML
böyle olacak:
<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>
Resimlerinize erişimim olmadığından, Vue logosunu bir resim olarak kullanma özgürlüğünü aldım.
Özetle, yukarıdaki problem Vue
derlerken bunu yapmak zorundadır , tüm varlıkları alır ve aşağıdaki resimdeki gibi başka bir klasöre koyar:

Bu kalıbı izleyin ve örneğiniz de işe yarayacaktır. Zevk almak!
DÜZENLEME: İsterseniz, statik varlıklarınızı ortak klasöre yerleştirebilirsiniz. Bu şekilde, varlıklarınız için statik yollar yazabileceksiniz.
bunu dene: v-for="(item, i) in items" :key="i"
Dinamik görüntüleri kullanmak için, require () kullanın. Buna sahip olduğunuzu değiştirin.
<div id="app">
<div v-for="item in data.items" :key="item.id">
<img ... :src="require(item.src)" />
</div>
</div>
Hatalıysam beni düzeltmeye yardımcı olabilecek bir for döngüsü kullanabilirsiniz