一.图片基本显示
test.wxml
<view class="operation-view">
<image class="operation-avatar" mode="aspectFit" src="../../image/lsjl.png"></image>
</view>
效果:
基础图片显示,官网image组件介绍:https://developers.weixin.qq.com/miniprogram/dev/component/image.html
1.图片移动到项目目录中
使用小程序开发者工具时,无法像其他一般直接将文件直接复制进去,原因好像是因为安全还是什么反正不支持,所以需要换一种蠢一点点方式。
- 打开项目所在目录,将图片手动Ctrl+v复制进去,刷新小程序开发工具。
不知道目录在哪可以点击工具中的项目详情查看,如下
2.小程序有关CSS的所有图片都无法使用本地资源,在工具编写或预览时可以加载本地资源,而上传则只能将图片放在“认证域名”下供访问。
- 我这儿是本地工具编辑,所以可以显示(包括扫码预览),但正式上不能这样做。
二.图片作为背景
test.wxml
<view class=".main_bj">
<image class="bj" src="../../image/main_bj.png"></image>
<view class="hello">
Hello Word
</view>
</view>
test.wxxs
/* pages/index/personal.wxss */
page{
height: 100%;
width: 100%;
}
.main_bj{
height: 100%;
position: relative;
}
.bj{
width: 100%;
height: 100%;
}
.hello{
position: absolute;
top: 30%;
width: 100%;
text-align: center;
}
效果如下:
由于其跟css共通的地方,可以通过position定位来实现,其使用方法跟html5中的大致相仿,都是套属性然后定位。
css官方介绍:http://www.w3school.com.cn/cssref/pr_class_position.asp
1.显示的图片往往跟实际大小有偏差,如:头像的图片,显示变形变大不符合UI原型图,这时需要给image定高宽强制实现。
- css中像素单位是px,小程序为rpx