Javascript 如何在vue.js中同时使用v-for和源绑定？

我想从一个数组中渲染我的卡，并在Vue.js中使用v-bind:src将它们的名称绑定为源

到目前为止，我来到这里，绑定在控制台中看起来很酷，但我在下面的代码中仍然看不到图像

<template>
    <div class="container">
        <div class="row">
            <div v-for="image in images" :key="image.id" class="col-6 col-md-4 col-lg-2"><img class="card" :src="'../assets/' + image + '.jpg'" alt=""></div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                images: [
                    "card-1",
                    "card-2",
                    "card-3",
                    "card-4",
                    "card-5",
                    "card-6"
                ],
            };
        }
    };
</script>

导出默认值{
数据（）{
返回{
图像：[
“卡-1”，
“卡-2”，
“卡-3”，
“卡-4”，
“卡-5”，
“卡-6”
],
};
}
};

这里是运动场：

---

尝试

要求

从动态路径显示图像

---

成功了！非常感谢你。我只是想了解，为什么我们需要使用require？用于使用Vue CLI？