折腾：
【未解决】微信小程序开发工具中去画界面实现首页布局
期间，需要实现类似web网页效果：
所以先要去导入logo图片，并引用显示，再设置宽高尺寸
小程序 导入图片
拷贝图片进去：
开发工具中即可看到：
然后再尝试引用，看是否能正常显示
然后代码中用：
src="../../images/logo_144x144.png"
是可以导入和显示的图片 。
但是：
<view class="logo"> <image class="img_logo" src="../../images/logo_144x144.png" alt="xxx Logo" width="120" height="120"></image> </view>
显示尺寸不对：
然后再去加上class的css配置，用rpx：
.img_logo{
width: 120rpx;
height: 120rpx;
}结果图片大小太小了：
再去换成px：
.img_logo{
width: 120px;
height: 120px;
}就正常了：
【总结】
小程序导入并引用图片步骤：
1.新建保存图片的文件夹，比如images
和pages,app.json等同级目录，即最顶级目录
2.右键images-》硬盘打开
3.拷贝和粘贴图片文件到images文件夹中
4.小程序开发工具中即可实时看到图片文件
对应文件结构是：
➜ xxxMiniprogram git:(master) ✗ tree . . ├── README.md ├── app.js ├── app.json ├── app.wxss ├── images │ ├── cover_img_default_no_projection.png │ └── logo_144x144.png ├── pages │ ├── index │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ └── logs │ ├── logs.js │ ├── logs.json │ ├── logs.wxml │ └── logs.wxss ├── project.config.json └── utils └── util.js 5 directories, 16 files
5.代码中用对应的image的src的路径去引用和显示图片
比如：
pages/index/index.wxml
<view class="logo"> <image class="img_logo" src="../../images/logo_144x144.png" alt="xxx Logo"> </image> </view>
即可显示图片：
此处图片尺寸是不对的。
6.再去设置图片的显示的尺寸大小：
pages/index/index.wxss
.img_logo{
width: 120px;
height: 120px;
}效果：
转载请注明：在路上 » 【已解决】小程序中如何导入Logo图片和显示并设置图片大小宽高尺寸