2、也可以将本地图片转成base64的。
wxml:
<view class="topview-left" style="background-image: url({{background}})mode='scaleToFill'"/>
js:
data: {
background: "肢山判/style/images/icon_coupon_backgroud.png",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
//设置背景图片
let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64')
this.setData({
'background': 'data:image/pngbase64,' + base64
})
//设置导航栏标题
wx.setNavigationBarTitle({
title: '下发优惠券'
})
},
wxss:
.topview-left {
display: flex
flex-direction: column
align-items: center
justify-content: center
width: 30%
height: 113px
background-repeat: no-repeat/** 不重复*/
background-size: 100% 100%
background-image: url('data:image/pngbase64,base64码')/** 添加背景图片的*/
}
3、也可以直接设置定位实现。
<view style="display: flexalign-items: centertext-align:centerjustify-content: centermargin-bottom:10px">
<image src="/pagesChronic/images/icon_case_background.png" style="height:26pxwidth:167pxposition:absolute"></image>
历改 <text style="position: relativecolor:#FF9721">评价</text>唯轮
</view>
效果:
微信小程序开发时开发工具自带的模拟器可以正常显示,但是手机上面体验版查看居然没搏喊有图片,
经过查阅资料发现如下文档导致图片不显燃银神示:
1.本地皮亏图片是用image加载的:src="../../../images/ic_header.jpg" 这样不能显示,应改为:https://........jpg
2.图片的url里面有中文
3.图片的HTTP应为小写的http以及图片的后缀为小写的.png或者.jpg
4.域名未备案
csdn地址: https://blog.csdn.net/HAPPYDAY048/article/details/82189871
小程序开烂御发的时候,参数值改变,前敏羡端页面会自动的饥拿岩响应的页面中:<image class="img-tree" src="../../img/{{index}}.png"></image>
js中:
Page({
data:{ index:1,},//图片名称
getPower:function(){//更换图片的函数
this.setData({ index:2,})//更换参数值
}
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)