Problem rendenring image and with static assets

[Adrielwerlich]

My problem is the following:

#html

  <div class="video-card-container col-5" 
    v-for="(subscription, i) in subscriptions" :key="i">
    <q-card>
      <img :src="showImage(subscription.avatar)" :alt="subscription.name" />
      <h5>{{ subscription.name }}</h5>
      <p>{{ subscription.role }}</p>
    </q-card>
  </div>

#javascript

data() {
    return {
      subscriptions: [
        {
          avatar: '~assets/img/avatar-vishnu.jpg',
          name: "Krishna 2",
          role: "universe superviser"
        },
        {
          avatar: 'img/thumbnail.png',
          name: "Bhagavan",
          role: "creator"
        },
        {
          avatar: './statics/img/avatar-vishnu.jpg',
          name: "Vishnu",
          role: "omnipresent"
        },
        {
          avatar: '../../assets/img/vishnu-buddha.jpg',
          name: "Vishnu-Buddha",
          role: "Converter of atheists"
        }
      ]

#browser console

#network

However, if I just put the url directly into the src attribute like:

it renders like this:

then if you look at the application tab inside the chrome dev tools, this is being show:

very strange behaviour

any suggestions?

[Adrielwerlich]

@Adrielwerlich

Ok, I´ve found a solution, perhaps not the best, but it works

use require, I guess there is some relation with lazy loading
which I don´t fully understand the flow