Döngü Vue.js'de görüntülenmeyen resim [kopya]

Aug 17 2020

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ı:, requireyol 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

2 vchan Aug 17 2020 at 15:17

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 JavaScriptkod 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, getImgUrldosya adını ileterek işlevinizi çağırmanız gerekir . Sizin HTMLbö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 Vuederlerken 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.

1 ehsan Aug 17 2020 at 13:34

bunu dene: v-for="(item, i) in items" :key="i"

1 Tony Aug 17 2020 at 17:34

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>

saiprabhav Aug 17 2020 at 19:19

Hatalıysam beni düzeltmeye yardımcı olabilecek bir for döngüsü kullanabilirsiniz