Problem rendenring image and with static assets



  • 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

    bcd98d41-939d-41f3-b172-33ccc544325a-image.png

    #network

    6c59c679-4c76-4a95-986d-74a6c8d88fb0-image.png

    60f9f7c2-bb21-4ba5-8139-74ccba199cd2-image.png

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

    20c89185-5650-45a0-9eef-12f7b13c63e1-image.png

    it renders like this:

    6bc1d835-4816-4fc7-acbe-75e5a2bbcb65-image.png

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

    2e510020-9606-47d1-9e3c-11362b5dc9dd-image.png

    very strange behaviour

    any suggestions?



  • @Adrielwerlich

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

    bd137c58-e28a-4fd1-a49a-8deb2d3403a6-image.png

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


Log in to reply