Gambar tidak ditampilkan dalam loop Vue.js [duplikat]

Aug 17 2020

Saya mencoba menampilkan 9 gambar berbeda dalam satu lingkaran menggunakan v-for.

Tapi, mereka tidak ditampilkan. Jika saya menunjukkannya tanpa loop apa pun, itu berhasil.

Saya mengekstrak sumber daya yang benar tetapi, tetap saja, itu tidak akan ditampilkan.

Ini kode saya:

<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>

Sekarang hasil yang saya dapatkan adalah:

Ini milik saya 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"] }
  ]

EDIT

Sejauh ini, saya telah mengamati bahwa masalahnya terletak pada file src. Jika saya menggunakan tautan gambar, itu berfungsi dengan baik. Tapi, tidak dengan gambar lokal (hanya jika saya menggunakan banyak gambar lokal dalam satu lingkaran dan bekerja dengan baik dalam satu). Jadi, yang bisa saya lakukan adalah meletakkan direktori file di sini. Saya akan merekomendasikan jika ada di antara Anda dapat mencoba di komputer lokal Anda dan mencoba mengunggah gambar dari direktori file Anda dalam satu lingkaran dan mempostingnya di sini.


TERPECAHKAN

Itu membutuhkan pernyataan ini persis require:, direktori path dan nama gambar.

<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>

Jawaban

2 vchan Aug 17 2020 at 15:17

Masalah ini ada hubungannya dengan kutipan Evan You berikut, yang dapat ditemukan di sini :

Karena imagePath hanya dirender oleh Vue pada waktu proses, Webpack tidak memiliki kesempatan untuk menulis ulang.

JavaScriptKode Anda harus seperti ini:

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);
    }
  }
};

Setelah itu, Anda perlu memanggil getImgUrlfungsi Anda dengan meneruskan nama file. Anda HTMLakan menjadi seperti ini:

<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>

Karena saya tidak memiliki akses ke gambar Anda, saya dengan leluasa menggunakan logo Vue sebagai gambar.

Singkatnya, masalah di atas harus dilakukan ketika Vuemengkompilasi, ia mengambil semua aset dan meletakkannya di folder lain seperti gambar di bawah ini:

Ikuti pola ini dan teladan Anda juga akan berhasil. Nikmati!

EDIT: Jika Anda mau, Anda dapat menempatkan aset statis Anda di folder publik. Dengan cara itu, Anda akan dapat menulis jalur statis untuk aset Anda.

1 ehsan Aug 17 2020 at 13:34

coba ini: v-for="(item, i) in items" :key="i"

1 Tony Aug 17 2020 at 17:34

Untuk menggunakan gambar dinamis, gunakan require (). Ubah apa yang Anda miliki dengan ini.

<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

Anda dapat menggunakan loop for yang dapat membantu mengoreksi saya jika saya salah