最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】小程序中如何导入Logo图片和显示并设置图片大小宽高尺寸

图片 crifan 31浏览 0评论
折腾:
【未解决】微信小程序开发工具中去画界面实现首页布局
期间,需要实现类似web网页效果:
所以先要去导入logo图片,并引用显示,再设置宽高尺寸
小程序 导入图片
微信小程序如何加载本地图片 – 贰佰没有伍 – CSDN博客
小程序开发图片的导入和导入路径 – 啊林博客 – CSDN博客
基础学习任务《五》导入图片至项目中-小程序开发练习/活动区-微信小程序开发社区-微信小程序联盟
跳坑《二百》图片相关问题合辑-小程序综合区-微信小程序开发社区-微信小程序联盟
怎么把图片导入到项目中,请牛神指教一下 | 微信开放社区
如何给小程序页面加载一张背景图片 – 简书
拷贝图片进去:
开发工具中即可看到:
然后再尝试引用,看是否能正常显示
然后代码中用:
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图片和显示并设置图片大小宽高尺寸

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
16 queries in 0.070 seconds, using 9.30MB memory