Vue.js 使用v-for动态渲染图像？

我想用v-for渲染本地文件夹中的图像，但如何使其100%动态

我尝试了在中提供的解决方案。当我尝试最有用的解决方案时，我只得到一个空白页，除非我用图像的名称填充数组

<template>
  <div class="comp__cardroster">
    <div class="container__cards"  >
      <div v-for="image in images" :key="image" class="tile--outer">
        <img class="tile--inner" :src="selectImage(image)" :alt="image"></div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      images: []
    }
  }
  methods: {
    selectImage(image) {
      return require('@/assets/card-images/' + image + ".jpg")
    }
  }
}
</script>

我希望代码能够动态地呈现图像，无论我的“资产/卡片图像”文件夹中有多少图像，也不必在每次向文件夹添加新图像时手动在数组中添加值

我做错了什么？谢谢你的建议

更新

我尝试过的事情

• 将“图像”数组从数据移动到计算
• 将“selectImage”方法从方法移动到计算
• 将“images”数组和“selectImage”方法都移动到计算机中

---

要么得到一个空白页，要么得到与以前相同的结果使用

requireAll

方法获得数组和您的计数。或

自定义加载程序

---

我认为我的评论不够清晰，所以我将用一个例子来解释我的意思；您应该能够以最小的努力将其应用到您的用例中。我的src文件结构和结果的屏幕截图也在这个答案的底部

---

我制作的模板与您的模板基本相同（没有类的额外div）：

这是我的剧本。我将在下面一一介绍：

导出默认值{
名称：“应用程序”，
计算：{
图像：函数（）{
const x=require.context（“@/assets/card images/”，true，/\.png$/）
返回此。导入高度（x）
}
},
方法：{
入口（右）{
返回r.keys（）.map（x=>
x、 子字符串（2，x.length）//从文件名中删除“/”
)
},
选择图像（图像）{
退货要求（'@/assets/card image/'+image）
}
}
}

---

计算的

该部分用于定义动态生成或计算的值。因为您希望动态生成图像，所以我将

images

作为一个计算函数（可能只是一个值，您可以使用它）

images

所做的就是使用

require.context

获取我的

@/assets/card images/

文件夹中所有

.png

图像的列表，并从中修剪前两个字符

方法

importAll

仅检索和修剪图像名称。我这样做是因为，否则，它会认为图像位于

@/assets/card images//xxxxx.png

——可能有更好的方法，但效果足够好

selectImage

从传入的文件名（如果存在）中获取图像。如果映像名称不存在，则会中断，但在如何实现时不应发生这种情况

---

注意：如果您真的愿意，您可以直接将v-for循环放在img标签上，从技术上缩短v-for循环，尽管我认为这不太可读：

---

这是我的

src

文件夹结构。图像的名称无关紧要，只要它们的扩展名与您在脚本标记中使用的扩展名相同：

以下是代码打印出来的内容（所有图像都只是Vue徽标的副本）：

---

编辑

如果要保留初始的

图像

数组，可以将

计算的

内容移动到生命周期方法

挂载的

或

创建的

（取决于您的用例）。阅读有关生命周期方法或方法的更多信息。下面是我的组件在装入

后的计算结果：


导出默认值{
名称：“应用程序”，
数据（）{
返回{
图片：[]
}
},
安装的（）{
const x=require.context（“@/assets/card images/”，true，/\.png$/）
this.images=this.importAll（x）
},
方法：{
入口（右）{
返回r.keys（）.map（x=>
x、 子字符串（2，x.length）//从文件名中删除“/”
)
},
选择图像（图像）{
退货要求（'@/assets/card image/'+image）
}
}
}
看起来您没有在任何地方填充图像数组。您的v-for循环将循环0次，因为数组的大小为0谢谢您的回答。是的，我知道数组是空的，但是我需要编写什么代码来填充该数组，而不必每次在“资产/卡图像”文件夹中添加新图像时手动添加图像名称。你有什么想法吗？嗯。。。也许，不要把
图像
放在
数据
中，而是把它放在
计算的
部分（如果你不确定的话，请阅读相关内容），然后做一些类似于你链接到建议的线程的事情，比如
require.context（'@/assets/card images/，false，/\.jpg$/）
我现在试过了。看起来和以前没什么不同。嗨，詹姆斯，谢谢你。你的解决方案和我希望的完全一样。再次感谢你解释得非常清楚！这对我帮助很大！很抱歉，我从一开始就不明白你的意思。我仍在学习过程中，所以我并不总是马上就明白。
data() {
    return {
      images: [1,2,3,4,5,6,7,8,9,10]
    }
  }