uniapp图片下方加标签标图片

1、UI部分

<view class="view-box" v-for="(item,index) in workCertificate" :key="index">
				<image class="icon" :src="item.url" @click="imgPreview(index,workCertificate)"></image>
				<text class="title">{
   {item.type}}</text>
			</view>

2、js部分

data() {
			return {
				
				workCertificate:[
					{type:"上岗证",url:"https://cdn.uviewui.com/uview/album/1.jpg"},
					{type:"上岗证",url:"https://cdn.uviewui.com/uview/album/2.jpg"},
					{type:"上岗证",url:"https://cdn.uviewui.com/uview/album/3.jpg"},
					{type:"上岗证",url:"https://cdn.uviewui.com/uview/album/4.jpg"},
					{type:"上岗证",url:"https://cdn.uviewui.com/uview/album/5.jpg"},
					{type:"上岗证",url:"https://cdn.uviewui.com/uview/album/6.jpg"},
				]
			}
		},
//方法部分
imgPreview(index,picList) {
				//预览图片
				let urlList=[]
				picList.forEach((value)=>{
					urlList.push(value.url)
				})
				
				let that = this
				uni.previewImage({
					current: index,
					urls: urlList
				})
			},

3、css部分

.view-box {
		display: flex;
		flex-direction: column;
		justify-content: left;
		align-items: left;
		background-color: #fff;
		float: left;
		padding: 15rpx;
	}

	.icon {
		width: 30vw;
		height: 30vw;
	}

	.title {
		margin-top: -45rpx;
		width: 30vw;
		font-size: 20upx;
		background-color: rgba(128,128,128,0.5);
		z-index:999;
		color: #ffffff;
		text-align:center
	}