vue 中动态绑定 img 的 src 属性

vue 中给 img 标签动态绑定 src 属性需要用到 require() 函数，比如：

    

        
    
    
{{item.info}}

data() {
    return {
        listData: [
            {src:require('./../../assets/img/message.svg'),info: '消息'},
            {src:require('./../../assets/img/integral.svg'),info: '积分'},
            {src:require('./../../assets/img/members.svg'),info: '会员'}
        ]
    }
}

v-for 循环遍历 listData 数组中的每一个对象，然后将拿到的每一项 item 的 src 值绑定给 img 标签的 src 上，数组 listData 中的 src 写的是每张图片的路径，这个路径必须要用 require 函数包裹起来，否则图片将显示不出来。

注意：require() 中不能有变量出现，如果你有这样的问题，可以移步到 → 传送门。