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

Posted 2023-02-23

【中文标题】如何在 vue.js 中同时使用 v-for 和源绑定？

【英文标题】：How to use v-for and source binding together in vue.js?

【发布时间】：2019-12-09 00:42:55

【问题描述】：

我想从一个数组中渲染我的卡片，并在 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'" ></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

【参考方案1】：

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

【讨论】：

成功了！太感谢了。我只是要求学习，为什么我们需要使用require？使用 Vue-CLI ？