Vue.js中如何实现动态的:src?
P粉937769356
P粉937769356 2023-09-16 09:38:42
[Vue.js讨论组]

我希望使用v-bind:src动态渲染一个带有v-for图像src的v-vor图像。尽管图像目录似乎是正确的(但我如何检查呢?)并且其他数组键被显示,但我在模板中看不到图标。

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

全部回复(1)
P粉310754094

尝试更改此代码

1. <img class="benefits__item-icon" :src="require(benefit.icon)"
    :alt="benefit.alt">
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号