How to do a dynamical :src in Vue js?

Question

I'm expecting to render with a v-vor image src dynamically with v-bind:src. Even though the image directory seems to be correct (but how could I check it though ?) and other array keys are displayed, I can't see the icon in the template.

structure:   src 
                - assets              // image inside 
                -components           // component inside    
                
<q-card v-for="benefit in benefits" :key="benefit.title">
        <img class="benefits__item-icon" :src="benefit.icon" :alt="benefit.alt">
        <q-card-section >
          <div>{{benefit.content}}</div>
        </q-card-section>
      </q-card>

data() {
      return {
        benefits: [
          {
            icon: '../assets/benefits-icon.svg',  //doesn't diplay
            alt: 'benefits',       //displayes ok
            title: 'plain text',   //displayes ok
            content: 'plain text'   //displayes ok
          },
        ]
       }
     }

Vue 3 + Vite solution: https://stackoverflow.com/questions/66419471/vue-3-vite-dynamic-image-src — yoduh, Jul 23 '23 at 15:59
@john It's a bundler thing and not related to using quasar or something else . If you're using vite (you're probably are) then the answer yoduh mentioned is the right one, if you're using webpack then go with banushan's answer — Muhammad Mahmoud, Jul 24 '23 at 04:51

score 0 · Answer 1 · answered Jul 24 '23 at 04:40

0

Try to change this code

1. <img class="benefits__item-icon" :src="require(benefit.icon)"
    :alt="benefit.alt">

answered Jul 24 '23 at 04:40

Banushan Puviraj

27
4

How to do a dynamical :src in Vue js?

1 Answers1