动态改变background-image
最近在开发uni-app小程序时尝试使用栅格布局利用u-grid-item循环遍历元素节点，其中每个元素节点对应的背景图片都不相同，于是就遇到了需要动态改变元素background-image的操作。
错误写法
如果单纯的使用常规的eslint写法。eslint的写法是无法正常显示：
<view :style="{backgroundImage:'url('+listItem.bgpicUrl+')'}">...</view>
list:[{title:'模块一',ptext:'模块一的描述',// 本地图片bgpicUrl:'../../static/img/index/组 4711@2x-2.png'},
]
在网上查了一些说是可以使用js写法，加个转义后的单引号\' ，但是发现会报错：
<view :style="{backgroundImage:'url(\'+listItem.bgpicUrl+\')'}">...</view>
正确写法
1. 本地图片
图片路径需要使用require对图片进行导入：
<template><view class="module_content"><u-grid:border="false":customStyle="{padding:3+'%'}"col="2"><u-grid-itemv-for="(listItem,listIndex) in list":key="listIndex":customStyle="{padding:10+'rpx'}"> <view :style="{width:100+'%',padding:10+'rpx',backgroundImage:'url('+listItem.bgpicUrl+')',backgroundSize:'100% 100%' }"><navigator class="nav" :url="listItem.toPageUrl"><text class="title" :style="{'color':listItem.Tcolor}" >{{listItem.title}}</text><text class="ptext" :style="{'color':listItem.Pcolor}">{{listItem.ptext}}</text></navigator></view></u-grid-item></u-grid><u-toast ref="uToast" /> </view>
</template><script>export default {data() {return {list:[{title:'模块一',ptext:'模块一的描述',// 本地图片bgpicUrl:require('../../static/img/index/组 4711@2x-2.png'),toPageUrl:'/pages/webview/mall/index',Tcolor:'#4D679B',Pcolor:'#76829A'},{title:'模块二',ptext:'模块二的描述',bgpicUrl:require('../../static/img/index/组 4714@2x-2.png'),toPageUrl:"/pages/webview/service/index",Tcolor:'#BC5D40',Pcolor:'#937A72'},{title:'模块三',ptext:'模块三的描述',bgpicUrl:require('../../static/img/index/组 4718@2x.png'),toPageUrl:"/pages/webview/jxkf/index",Tcolor:'#4D679B',Pcolor:'#99816B'},{title:'模块四',ptext:'模块四的描述',bgpicUrl:require('../../static/img/index/组 4713@2x-2.png'),toPageUrl:"/pages/webview/user/index",Tcolor:'#46A589',Pcolor:'#73998E'},]}},}
</script>
2. 网络图片
将图片放置在服务器上，直接请求服务的图片地址：
<view :style="{backgroundImage:'url('+listItem.bgpicUrl+')',backgroundSize:'100% 100%' }">...</view>
list:[{title:'模块一',ptext:'模块一的描述',// 服务器上的图片地址bgpicUrl:'http://fuwuqi.com/static/img/index/组 4711@2x-2.png'),toPageUrl:'/pages/webview/mall/index',},]
)
