Dynamically change background-image
Recently, when developing the uni-app applet, I tried to use the grid layout to u-grid-itemloop through the element nodes. The background images corresponding to each element node are different, so I encountered the need to dynamically change the background-image of the element.
typo
If you simply use the conventional eslint writing method. The way eslint is written cannot be displayed normally:
<view :style="{backgroundImage:'url('+listItem.bgpicUrl+')'}">...</view>
list:[
{
title:'模块一',
ptext:'模块一的描述',
// 本地图片
bgpicUrl:'../../static/img/index/组 [email protected]'
},
]
I checked some on the Internet and said that it is possible to use the js writing method and add an escaped single quotation mark \' , but found that an error will be reported :
<view :style="{backgroundImage:'url(\'+listItem.bgpicUrl+\')'}">...</view>
correct spelling
1. Local image
The image path needs to use require to import the image:
<template>
<view class="module_content">
<u-grid
:border="false"
:customStyle="{padding:3+'%'}"
col="2"
>
<u-grid-item
v-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/组 [email protected]'),
toPageUrl:'/pages/webview/mall/index',
Tcolor:'#4D679B',
Pcolor:'#76829A'
},
{
title:'模块二',
ptext:'模块二的描述',
bgpicUrl:require('../../static/img/index/组 [email protected]'),
toPageUrl:"/pages/webview/service/index",
Tcolor:'#BC5D40',
Pcolor:'#937A72'
},
{
title:'模块三',
ptext:'模块三的描述',
bgpicUrl:require('../../static/img/index/组 [email protected]'),
toPageUrl:"/pages/webview/jxkf/index",
Tcolor:'#4D679B',
Pcolor:'#99816B'
},
{
title:'模块四',
ptext:'模块四的描述',
bgpicUrl:require('../../static/img/index/组 [email protected]'),
toPageUrl:"/pages/webview/user/index",
Tcolor:'#46A589',
Pcolor:'#73998E'
},
]
}
},
}
</script>
2. Internet pictures
Place the picture on the server and directly request the picture address of the service:
<view :style="{backgroundImage:'url('+listItem.bgpicUrl+')',backgroundSize:'100% 100%' }">...</view>
list:[
{
title:'模块一',
ptext:'模块一的描述',
// 服务器上的图片地址
bgpicUrl:'http://fuwuqi.com/static/img/index/组 [email protected]'),
toPageUrl:'/pages/webview/mall/index',
},
]