javascript - 如何在vue.js中一起使用v-for和源绑定(bind)？

我想从阵列中渲染卡片，并使用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>

这里的操场：
https://codesandbox.io/s/vue-template-udd08

最佳答案

尝试require显示动态路径中的图像
https://codesandbox.io/s/vue-template-hcrjb

关于javascript - 如何在vue.js中一起使用v-for和源绑定(bind)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57291719/