Comment implémenter dynamique :src dans Vue.js ?
P粉937769356
P粉937769356 2023-09-16 09:38:42
0
1
642

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'   //正常显示
          },
        ]
       }
     }

P粉937769356
P粉937769356

répondre à tous(1)
P粉310754094

Essayez de changer ce code

1. <img class="benefits__item-icon" :src="require(benefit.icon)"
    :alt="benefit.alt">
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal