Vuetify 动态 img 不工作 => ../assets/

Question

我想在一个数组上使用 v-for，我想获取 image 和文本。

Image inside Data() {} 我试过了：

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

根本不工作。如果我 'hard coded' 图像 在模板中 如下所示，它就可以工作。

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>

Vuetify 动态 img 不工作 => ../assets/

Vuetify dynamic img not working => ../assets/

image

vue.js

url

vuetify.js

src