Imagem não exibida no loop Vue.js [duplicado]

Question

Estou tentando exibir 9 imagens diferentes em um loop usando v-for.

Mas, eles não estão aparecendo. Se eu mostrar sem nenhum loop, funciona.

Estou extraindo o recurso certo, mas, ainda assim, ele não será exibido.

Este é o meu código:

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

Agora o resultado que estou obtendo é:

Este é o meu 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"] }
  ]

---

EDITAR

Até agora, observei que o problema está no arquivo src. Se estou usando um link de imagem, está funcionando bem. Mas, não com uma imagem local (apenas se eu usar um monte de imagens locais em um loop e funcionar bem em uma única). Então, o que posso fazer é colocar o diretório do arquivo aqui. Eu recomendaria se qualquer um de vocês pudesse tentar em seu computador local e tentar fazer upload de imagens de seu diretório de arquivos em um loop e postá-las aqui.

---

RESOLVIDO

Precisava exatamente desta declaração: require, o diretório do caminho e o nome da imagem.

<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

Esta questão tem a ver com a seguinte citação de Evan You, que pode ser encontrada aqui :

Como o imagePath só é renderizado pelo Vue em tempo de execução, o Webpack não tem chance de reescrevê-lo.

Seu JavaScriptcódigo precisa ficar assim:

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

Depois, você precisa chamar sua getImgUrlfunção passando o nome do arquivo. O seu HTMLficará assim:

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

Como não tenho acesso às suas imagens, tomei a liberdade de usar o logotipo do Vue como imagem.

Resumindo, o problema acima tem a ver com isso ao Vuecompilar, ele pega todos os assets e coloca em outra pasta como na imagem abaixo:

Siga este padrão e seu exemplo também funcionará. Apreciar!

EDIT: Se desejar, você pode colocar seus recursos estáticos na pasta pública. Dessa forma, você poderá escrever caminhos estáticos para seus recursos.

Answer 2

tente isso:v-for="(item, i) in items" :key="i"

Answer 3

Para usar imagens dinâmicas, use require(). Mude o que você tem para isso.

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

Answer 4

você pode usar um loop for que pode ajudar a me corrigir se eu estiver errado