Comment implémenter dynamique :src dans Vue.js ?

Question

Je souhaite restituer dynamiquement une image v-vor avec v-for image src en utilisant v-bind:src. Bien que le répertoire images semble correct (mais comment vérifier cela ?) et que les autres clés du tableau soient affichées, je ne vois pas les icônes dans le modèle.

structure:   src 
                - assets              // 图像内部 
                -components           // 组件内部    
                
<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',  //不显示
            alt: 'benefits',       //正常显示
            title: 'plain text',   //正常显示
            content: 'plain text'   //正常显示
          },
        ]
       }
     }

Answer 1

Essayez de changer ce code

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