suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Wie implementiert man dynamisches :src in Vue.js?

Ich möchte ein v-vor-Bild mit v-for image src unter Verwendung von v-bind:src dynamisch rendern. Obwohl das Bilderverzeichnis korrekt zu sein scheint (aber wie überprüfe ich das?) und die anderen Array-Schlüssel angezeigt werden, sehe ich die Symbole in der Vorlage nicht.

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粉937769356P粉937769356446 Tage vor645

Antworte allen(1)Ich werde antworten

  • P粉310754094

    P粉3107540942023-09-17 00:37:16

    尝试更改此代码

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

    Antwort
    0
  • StornierenAntwort