小程序-静态界面部分——(图片)

一.图片基本显示

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