how to iterate articles with images inside with vue - vue.js

Question

I have to iterate some articles which contain images inside. The thing is that it doesn't work what I'm doing.
I have tried an v-for inside the article ad then, binding the src like this:
<section class="articulos b-flex b-flex-wrap b-flex-center b-flex-center-horizontal">
<article v-for="imagen in imagenes">
<figure class="contenedor-articulo">
<img v-bind:src="'../assets/img/' + imagen.url" />
<figcaption>
<h3>Ensaladilla Rusa</h3>
<p>+ 0,50 €</p>
<i class="fas fa-plus-circle"></i>
</figcaption>
</figure>
</article>
</section>
the script of the component is like this:
<script>
export default {
name: 'Articulos',
data() {
return {
imagenes: [
{url:"apeteat_2019_ensaladaquinoachicken.jpg"},
{url:"apeteat_2017__ensaladilla_rusa.jpg"},
{url:"apeteat_2018_nigirimix.jpg"},
{url:"apeteat_2019_wrapcesar.jpg"},
{url:"apeteat_2019_ensaladaquinoachicken.jpg"},
{url:"apeteat_2018_nigirimix.jpg"}
]
}
}
}
</script>
I have this error message:
message: error: Elements in iteration expect to have 'v-bind:key' directives (vue/require-v-for-key) at src/components/Articulos.vue:4:9:
2 |
3 | <section class="articulos b-flex b-flex-wrap b-flex-center b-flex-center-horizontal">
> 4 | <article v-for="imagen in imagenes">
| ^
5 |
6 | <figure class="contenedor-articulo">
the image is not displaying. Tha image url is so:
src="../assets/img/apeteat_2019_ensaladaquinoachicken.jpg", before iterating thwy were displaying perfectly.

Answer 1

Add unique key when use v-for.
<article
v-for="(imagen, index) in imagenes"
:key="index"
>
Using index as key is not recommended. Please add unique key or id in each image object like below.
[
{
id: 1,
url:"2019_ensaladaquinoachicken.jpg"
},
...
]
...
<article
v-for="imagen in imagenes"
:key="imagen.id"
>

Answer 2

I guess the problem with your imagenes array.
Instead of this (array with one object with duplicated keys):
imagenes: [{
url:"2019_ensaladaquinoachicken.jpg",
url:"2017__ensaladilla_rusa.jpg",
url:"2018_nigirimix.jpg",
url:"2019_wrapcesar.jpg",
url:"2019_ensaladaquinoachicken.jpg",
url:"2018_nigirimix.jpg"
}]
It most likely should be this (array of objects):
imagenes: [
{ url:"2019_ensaladaquinoachicken.jpg" },
{ url:"2017__ensaladilla_rusa.jpg" },
{ url:"2018_nigirimix.jpg" },
{ url:"2019_wrapcesar.jpg" },
{ url:"2019_ensaladaquinoachicken.jpg" },
{ url:"2018_nigirimix.jpg" }
]

Answer 3

You need to add a '/' in your path binding like this : v-bind:src="'../assets/img/apeteat_/' + imagen.url"
Also, rewrite your imagenes array to be like this (they key 'url' is duplicated):
imagenes: [
{url: //img name },
{url: //img name }
//etc
]

Answer 4

In HTML
<article v-for="imagen in imagenes" :key="imagen.id">
<img :src="require(`#/assets/${imagen.imagenes}`)" />
...
</article>
In JS
imagenes: [
{id:1, url:"apeteat_2019_ensaladaquinoachicken.jpg"},
{id:2, url:"apeteat_2017__ensaladilla_rusa.jpg"},
{id:3, url:"apeteat_2018_nigirimix.jpg"},
{id:4, url:"apeteat_2019_wrapcesar.jpg"},
{id:5, url:"apeteat_2019_ensaladaquinoachicken.jpg"},
{id:6, url:"apeteat_2018_nigirimix.jpg"}
]