Vue.js 如何使用vue迭代包含图像的文章

我必须迭代一些包含图像的文章。问题是我现在做的事不管用

我在文章广告中尝试了一个v-for，将src绑定如下：

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

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

俄罗斯恩萨拉迪拉酒店
+0.50欧元

组件的脚本如下所示：

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

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

导出默认值{
名称：“Articulos”，
数据（）{
返回{
图像：[
{url:“apeteat_2019_ensaladaquinoachecken.jpg”}，
{url:“apeteat_2017_uuuensaladilla_rusa.jpg”}，
{url:“apeteat_2018_nigirimix.jpg”}，
{url:“apeteat_2019_wrapcesar.jpg”}，
{url:“apeteat_2019_ensaladaquinoachecken.jpg”}，
{url:“apeteat_2018_nigirimix.jpg”}
]
}
}
}

我收到以下错误消息：

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

消息：错误：迭代中的元素希望在src/components/Articulos处有“v-bind:key”指令（vue/require-v-for-key）。vue:4:9：
2 | 
3 | 
> 4 |         
|         ^
5 | 
6 |             

图像未显示。图像url是这样的：

---

src=“../assets/img/apeteat_2019_ensaladaquinoachecken.jpg”，在进行迭代之前，它们显示得非常完美。

我猜您的图像阵列存在问题

与此相反（包含一个具有重复键的对象的数组）：

它很可能是这样的（对象数组）：

---

我猜你的图像序列的问题出在哪里了

与此相反（包含一个具有重复键的对象的数组）：

它很可能是这样的（对象数组）：

---

您需要在路径绑定中添加一个“/”，如下所示：

v-bind:src=“”../assets/img/apeteat\/”+imagen.url“

另外，将

imagenes

数组改写为如下所示（它们的键“url”是重复的）：

imagenes：[
{url://img name}，
{url://img name}
//等
]

您需要在路径绑定中添加一个“/”，如下所示：

v-bind:src=“”../assets/img/apeteat_/”+imagen.url“

另外，将

imagenes

数组改写为如下所示（它们的键“url”是重复的）：

imagenes：[
{url://img name}，
{url://img name}
//等
]

HTML格式

<article v-for="imagen in imagenes" :key="imagen.id">
  <img  :src="require(`@/assets/${imagen.imagenes}`)" /> 
  ...
</article>

在HTML中

<article v-for="imagen in imagenes" :key="imagen.id">
  <img  :src="require(`@/assets/${imagen.imagenes}`)" /> 
  ...
</article>

---

使用

v-for

时添加唯一的

键

<article
 v-for="(imagen, index) in imagenes"
 :key="index"
>

不建议使用索引作为键。请在每个图像对象中添加唯一的密钥或id，如下所示

[
  { 
    id: 1,
    url:"2019_ensaladaquinoachicken.jpg"
  },
  ...
]
...

<article
 v-for="imagen in imagenes"
 :key="imagen.id"
>

[
{ 
id:1，
url:“2019_ensaladaquinoachecken.jpg”
},
...
]
...

使用

v-for

时添加唯一的

键

<article
 v-for="(imagen, index) in imagenes"
 :key="index"
>

不建议使用索引作为键。请在每个图像对象中添加唯一的密钥或id，如下所示

[
  { 
    id: 1,
    url:"2019_ensaladaquinoachicken.jpg"
  },
  ...
]
...

<article
 v-for="imagen in imagenes"
 :key="imagen.id"
>

[
{ 
id:1，
url:“2019_ensaladaquinoachecken.jpg”
},
...
]
...

您可以通过随一起安装来避免类似的语法错误。您可以通过随一起安装来避免类似的语法错误。我更改了它并进行了迭代，很好。但是图像仍然没有显示。那么现在的问题更可能是路径的“./assets/img/”部分，请尝试

/assets/img/

？关键是，您需要检查您的路径是否实际引用了正确的目录。图像url是这样的：src=“../assets/img/apeteat_2019_ensaladaquinoachecken.jpg”，如果

apeteat\uuu

实际上是图像名的一部分，而不是目录名，那么您不应该添加“/”并返回到

v-bind:src=“”../assets/img/apeteat\uuu'+imagen.url”

（在您的原始帖子中不清楚）。。。。你能显示你的目录结构吗？如果在你的浏览器控制台上显示任何错误，请在这里显示。我更改了它，它会迭代，很好。但是图像仍然没有显示。那么现在的问题更可能是路径的“./assets/img/”部分，请尝试

/assets/img/

？关键是，您需要检查您的路径是否实际引用了正确的目录。图像url是这样的：src=“../assets/img/apeteat_2019_ensaladaquinoachecken.jpg”，如果

apeteat\uuu

实际上是图像名的一部分，而不是目录名，那么您不应该添加“/”并返回到

v-bind:src=“”../assets/img/apeteat\uuu'+imagen.url”

（在您的原始帖子中不清楚）。。。。你能显示你的目录结构吗？如果在你的浏览器控制台上显示任何错误，请在这里显示。非常感谢，现在它可以完美地迭代，但是图像不会显示。我写了错误消息…非常感谢，现在它可以完美地迭代，但是图像没有显示。我写了错误消息…在生产中它不会工作。由于使用Webpack，您需要使用@/assets/${imagen.imagenes}）“/>在生产中无法使用。由于使用Webpack，您需要使用@/assets/${imagen.imagenes}）”/>