Vuetity dinamic img not workig => ../ assets /

Question

我想在我想获得image和文本的数组上进行透视。

[Data（）内部的图像{}我试过：

@/../assets/image.jpg
../../assets/image.jpg
~/..assets/image.jpg
require('../assets/image.jpg')"

完全不工作。如果我对图像在模板内进行“硬编码”，如下图所示。

v-img(src='../assets/image.jpg')

当我在模板和数据之间进行如下拆分时：

模板：

v-container
    v-row
      v-col(v-for='benefit in benefits')
        v-img(:src='benefit.icon')

SCRIPT：

export default {
  data() {
  return {
    benefits: [
      {
        icon: '../assets/image.jpg',
      },

从不工作：（

知道我在做什么错吗？

Answer 1

代码的模板部分不清楚，但是，根据我对要实现的目标的理解，这应该可以工作：

<template>
  <v-container>
    <v-row v-for="(benefit, index) in benefits" :key="index">
      <v-col>
        <v-img :src="benefit.icon" />
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data () {
    return {
      benefits: [
        { 
          icon: require('@/assets/image.jpg')
        }
      ]
    }
  }
}
</script>