将需要存入数据库的图片转换为网络上可以请求的图片地址,确保存入数据库的网址不要太长,要不会导致数据库的开销变大,甚至太长会导致存不进去,我用的字段是varchar 255,<image>标签中也支持网络地址的访问。
在uniapp中使用v-for循环使用<image>标签时,src路径就不需要在加入{{ }},否则编译器不会编译成功,所以直接使用循环变量即可
<view class="goods-count" v-if="orderBtnCurrentIndex==0" v-for="(item,index) in goodslist">
<view class="goods-item">
<view class="goods-introduce">
<text>Item:{{item.name}} </text>
<text class="vipText">VIP{{item.vip_level-2}}</text>
</view>
<view class="goods-picAndInfo">
<view class="goods-pic">
<image :src="item.thumb"></image>
</view>
<view class="goods-info">
<view class="goods-info-detail">
<text>price:${{item.price}}</text>
</view>
<view class="goods-info-detail">
<text>Expected reward:${{item.reward}}</text>
</view>
<view class="goods-info-detail">
<text>Reward in:{{item.hours}} h</text>
</view>
<button @click="buyGoods(index)">Click to buy</button>
</view>
</view>
</view>
</view>