uniapp img 动态渲染 的几种用法

img => src 的动态变化

	<img src="https://yjtravelphotography.oss-cn-hangzhou.aliyuncs.com/shop/login_bg.png"
			class="page_background"></img>

<img style="width: 160rpx; height: 160rpx; border-radius: 10rpx;"
											:src="item.picImage"></img>



<template>
  <scroll-view scroll-y="true" @scrolltolower="scrollToLower"
					style="height:calc(100% - 56px - 90rpx);padding: 0 20rpx;">
					<u-radio-group @change="groupChange">
						<u-radio v-for="(item, index) in radiolist" :key="index" :name="item.name">
							<view class="menu_item">
								<view class="u-flex">
									<view>
										<img style="width: 160rpx; height: 160rpx; border-radius: 10rpx;"
											:src="item.picImage"></img>
									</view>
									<view class="u-flex-col u-row-around u-margin-left-20" style="height: 160rpx;">
										<!-- <view class="goods_title">{{item.name}}</view> -->
										<view class="goods_title">299 元畅享延吉公主体验：服装 + 妆造 + 拍摄一站式旅拍套餐</view>
										<view class="goods_price">
											分类：单人照
										</view>
										<view class="u-flex u-row-between u-col-center">
											<view class="goods_price">
												¥ <label style="font-size: 40rpx;font-weight: 540;"> 299.00 </label>
											</view>
											<view class="u-font-26">年售 28</view>
										</view>
									</view>
								</view>
							</view>
						</u-radio>
					</u-radio-group>
				</scroll-view>
</template>

<script>
export default {
        data(){
            return{
                radiolist: [{
						name: '苹果',
						disabled: false,
						picImage: "https://yjtravelphotography.oss-cn-hangzhou.aliyuncs.com/shop/logo.png"

					},
					{
						name: '香蕉',
						disabled: false,
						picImage: "https://yjtravelphotography.oss-cn-hangzhou.aliyuncs.com/resources/20250919/1758272222955.jpg"
					},
					{
						name: '橙子',
						disabled: false,
						picImage: "https://yjtravelphotography.oss-cn-hangzhou.aliyuncs.com/shop/logo.png"
					}, {
						name: '榴莲',
						disabled: false,
						picImage: "https://yjtravelphotography.oss-cn-hangzhou.aliyuncs.com/resources/20250919/1758272222955.jpg"
					}
				],
            }
        }
}
</script>

<style>

</style>

---

---

backgroundImage 动态背景图片 以及 标签传值

1. 背景图片

   <view 
				      class="image"
				      :style="{ backgroundImage: `url(${item.iamge})` }"
				    ></view>

2. 标签传值

<template>

				<view 
				  class="item" 
				  v-for="(item, index) in sampleList" 
				  :key="index"
				@click="toPage('/subPackages/association/pages/association/followshotadd?image='+item.sampleImage+'&id='+item.id)"
				>
				
				</view>
			
</template>

<script>
export default {
        data(){
            return{
              
            }
        }
        methods(){
            toPage(item) { 
		  uni.navigateTo({ url: item });  
		}
        }
}
</script>

<style>

3. 动态背景图片 以及 标签传值 完整代码

<template>
	<scroll-view scroll-y="true" @scrolltolower="scrollToLower"
				:style="'height:calc(100vh - '+(fixedHeigth+navBarHeight+20)+'px);'">
			
				<view class="menu">
				<view 
				  class="item" 
				  v-for="(item, index) in sampleList" 
				  :key="index"
				@click="toPage('/subPackages/association/pages/association/followshotadd?image='+item.sampleImage+'&id='+item.id)"
				>
				    <view 
				      class="image"
				      :style="{ backgroundImage: `url(${item.iamge})` }"
				    ></view>
				    
				    <view class="u-padding-18 u-font-26">
				      <view>{{ item.name || '民俗园打卡 ▪ 传统服饰' }}</view>
				      <view class="u-margin-top-20" style="color: gray;">
				        {{ item.shopNum || 0 }}家门店可拍
				      </view>
				    </view>
				  </view>
				</view>
				<view style="height: env(safe-area-inset-bottom);"></view>
			</scroll-view>
</template>

<script>
export default {
        data(){
            return{
              
            }
        }
        methods(){
            getList(){
				this.$u.api.getSampleSeriesList({xxx:1}).then(result => {
					console.log(result,'result')
					let array = result.rows
					for (let s of array) {
						this.sampleList.push(s)
					 console.log(	this.sampleList,'	this.sampleList')
					}
					this.total = result.total
				}).catch(error => {
					console.error('请求失败:', error);
				});
			},
toPage(item) { 
		  uni.navigateTo({ url: item });  
		}
        }
}
</script>

<style>