Immagine non visualizzata nel loop Vue.js [duplicato]

Question

Sto cercando di visualizzare 9 immagini diverse in un ciclo usando v-for.

Ma non stanno mostrando. Se lo mostro senza alcun loop, funziona.

Sto estraendo la risorsa giusta ma, comunque, non verrà visualizzata.

Questo è il mio codice:

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

Ora il risultato che ottengo è:

Questo è il mio 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"] }
  ]

---

MODIFICARE

Finora, ho osservato che il problema risiede nel file src. Se sto usando un collegamento immagine, funziona perfettamente. Ma non con un'immagine locale (solo se ho usato un mucchio di immagini locali in un ciclo e ho funzionato bene in singolo). Quindi, quello che posso fare è mettere qui la directory dei file. Consiglierei se qualcuno di voi può provare sul proprio computer locale e provare a caricare le immagini dalla directory dei file in un ciclo e pubblicarle qui.

---

RISOLTO

Aveva bisogno esattamente di questa istruzione: require, la directory del percorso e il nome dell'immagine.

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

Answer 1

Questo problema ha a che fare con la seguente citazione di Evan You, che può essere trovata qui :

Poiché imagePath viene visualizzato solo da Vue in fase di esecuzione, Webpack non ha alcuna possibilità di riscriverlo.

Il tuo JavaScriptcodice deve essere così:

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

Successivamente, devi chiamare la tua getImgUrlfunzione passando il nome del file. Il tuo HTMLsarà così:

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

Poiché non ho accesso alle tue immagini, mi sono preso la libertà di utilizzare il logo Vue come immagine.

In sintesi, il problema di cui sopra ha a che fare con la Vuecompilazione, prende tutte le risorse e le inserisce in un'altra cartella come l'immagine qui sotto:

Segui questo schema e anche il tuo esempio funzionerà. Divertiti!

MODIFICA: se lo desideri, puoi inserire le tue risorse statiche nella cartella pubblica. In questo modo, sarai in grado di scrivere percorsi statici per le tue risorse.

Answer 2

prova questo:v-for="(item, i) in items" :key="i"

Answer 3

Per utilizzare immagini dinamiche, utilizzare require(). Cambia ciò che hai in questo.

<div id="app">
    <div v-for="item in data.items" :key="item.id">
        <img ... :src="require(item.src)" />
    </div>
</div>

Answer 4

puoi usare un ciclo for che può aiutarti a correggermi se sbaglio