如何在Vue js中创建dynamic:src?

v2g6jxz6  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(102)

我希望使用v-bind:src动态渲染v-vor图像src。即使图像目录似乎是正确的(但我如何检查它呢?)和其他数组键显示时,我在模板中看不到图标。

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
          },
        ]
       }
     }

字符串

ia2d9nvy

ia2d9nvy1#

尝试更改此代码

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

字符串

相关问题