在vuejs中的v-for中使用img src
在vuejs中的v-for中使用img src
提问于 2018-10-23 01:08:58
我有一个基本的vue.js组件，比如：
template:'<nav id="custom-erp-menu-nav">'+
'<ul id="custom-erp-menu-lists">'+
'<li class="custom-erp-menu-list" v-on:click="toggleOpenChild" v-for="module in modules">'+
'<a href="#">'+
'<span>'+
//'<img v-bind:src="assets/images/module-icons/module.icon.svg" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">'+
'<img src="assets/images/module-icons/{{ module.icon }}.svg" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">'+
'</span>'+
'<span class="custom-erp-menu-parent">{{ module.name }}</span>'+
'</a>'+
'<ul class="nav custom-erp-menu-child-dropdown" id="purchase-order-child">'+
'<li><a href="page-profile.html" class="custom-erp-menu-child">Profile</a></li>'+
'<li><a href="page-login.html" class="custom-erp-menu-child">Login</a></li>'+
'<li><a href="page-lockscreen.html" class="custom-erp-menu-child">Lockscreen</a></li>'+
'</ul>'+
'</li>'+
'</ul>'+
'</nav>',在image标签中，我尝试这样放入图像源
'<img src="assets/images/module-icons/{{ module.icon }}.svg" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">'+这不起作用。我也试过其他类似的答案，
'<img :src="'assets/images/module-icons/'+module.icon.svg" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">'+这是我的数据
data : function(){
return {
modules : [
{ name : 'Foo', icon : 'dollar-bills'},
{ name : 'Bar', icon : 'dollar-trucks'},
{ name : 'FOOBAR', icon : 'env-env'}
]
}
},回答 2
Stack Overflow用户
发布于 2018-10-23 03:14:32
由于组件是以字符串形式编写的，并且已经用完了双引号和单引号，因此必须使用template strings/literals.
因此，要简单地解决图像源的一个问题，您必须执行以下操作：
'<img :src="`assets/images/module-icons/${module.icon}.svg`" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">'你想要执行的每个变量或脚本都必须在美元符号的小胡子里。
Vue.component('my-component', {
data: function() {
return {
modules : [
{ name : 'Foo', icon : 'dollar-bills'},
{ name : 'Bar', icon : 'dollar-trucks'},
{ name : 'FOOBAR', icon : 'env-env'}
],
count: 0
}
},
template:'<nav id="custom-erp-menu-nav">'+
'<ul id="custom-erp-menu-lists">'+
'<li class="custom-erp-menu-list" v-on:click="" v-for="module in modules">'+
'<a href="#">'+
'<span>'+
'<img :src="`assets/images/module-icons/${module.icon}.svg`" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">'+
'</span>'+
'<span class="custom-erp-menu-parent">{{ module.name }}</span>'+
'</a>'+
'<ul class="nav custom-erp-menu-child-dropdown" id="purchase-order-child">'+
'<li><a href="page-profile.html" class="custom-erp-menu-child">Profile</a></li>'+
'<li><a href="page-login.html" class="custom-erp-menu-child">Login</a></li>'+
'<li><a href="page-lockscreen.html" class="custom-erp-menu-child">Lockscreen</a></li>'+
'</ul>'+
'</li>'+
'</ul>'+
'</nav>'
})
new Vue({
el: '#app'
})<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
<my-component/>
</div>
Stack Overflow用户
发布于 2018-10-23 04:05:08
这就是为什么Vue有Computed properties的原因
Vue.component('my-component', {
data: function() {
return {
modules : [
{ name : 'Foo', icon : 'dollar-bills'},
{ name : 'Bar', icon : 'dollar-trucks'},
{ name : 'FOOBAR', icon : 'env-env'}
],
count: 0
}
},
computed: {
assetsPath: function(file) {
return 'assets/images/module-icons/' + file +'.svg';
}
},
template:'<nav id="custom-erp-menu-nav">'+
'<ul id="custom-erp-menu-lists">'+
'<li class="custom-erp-menu-list" v-on:click="" v-for="module in modules">'+
'<a href="#">'+
'<span>'+
'<img :src=assetsPath(module.icon) class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">'+
'</span>'+
'<span class="custom-erp-menu-parent">{{ module.name }}</span>'+
'</a>'+
'<ul class="nav custom-erp-menu-child-dropdown" id="purchase-order-child">'+
'<li><a href="page-profile.html" class="custom-erp-menu-child">Profile</a></li>'+
'<li><a href="page-login.html" class="custom-erp-menu-child">Login</a></li>'+
'<li><a href="page-lockscreen.html" class="custom-erp-menu-child">Lockscreen</a></li>'+
'</ul>'+
'</li>'+
'</ul>'+
'</nav>'
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52934453
复制相关文章
相似问题
腾讯云开发者
