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

Question

I would like to v-for on an array that I want to get the image and text.

Image inside Data() {} I tried:

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

Don't work at all. If I 'hard coded' the image inside the template like below it works.

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

When I split between Template and Data like below:

TEMPLATE:

<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>

SCRIPT:

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

Never works :(

Any idea what I'm doing wrong?

Answer 1

The template part of your code is not clear, however, from my understanding of what you are trying to achieve, this should work:

<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>