Vuetify 动态 img 不起作用 => ../assets/

Question

我想对一个数组进行 v-for，我想获取 图像 和文本。

我尝试过的 Data() {} 中的图像：

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

根本不工作。 如果我像下面那样“硬编码”模板内的图像，它可以工作。

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

当我像下面这样在模板和数据之间进行拆分时：

模板：

<v-content>
  <v-container>
    <v-row>
      <v-col v-for="benefit in benefits"><img :src="benefit.icon" /></v-col>
    </v-row>
  </v-container>
</v-content>

脚本：

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>