微信小程序图片使用示例
小程序官方API:https://developers.weixin.qq.com/miniprogram/dev/component/image.html
1:加载本地文件夹图片
<image src="/image/pig.jpg" mode="aspectFill">
</image>
<image src="/image/pig.jpg" mode="aspectFill">
</image>
2:加载服务器图片
wxml:
<image src="{{imageUrl}}" mode="aspectFill">
</image>
<image src="{{imageUrl}}" mode="aspectFill">
</image>
js:
Page({
data: {
imageUrl: "http://www.intmote.com/timg.jpg",
},
Page({
data: {
imageUrl: "http://www.intmote.com/timg.jpg",
},
或者直接在wxml写代码:
<image src="http://www.intmote.com/timg.jpg" mode="aspectFill">
</image>
<image src="http://www.intmote.com/timg.jpg" mode="aspectFill">
</image>
3:给小程序页面加载一张背景图片
方法一:
使用背景图片的时候用网络图片,就是用外链的形式,比如你将这张图片放到你的服务器,如:https://xxxx/xxx.jpg;
方法二:
将背景图片使用编码base64进行转换,可以在这个网址进行http://tool.css-js.com/base64.html 转换,如:background-image: url("转换后得到的编码文本"),如果多次使用的话可以将该值设置为全局变量,再在js文件进行引用即可;
详见上一篇博客:https://www.jianshu.com/p/61e6e7390f4a
注:
关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。原文作者:祈澈姑娘技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
公众号回复“1”,拉你进程序员技术讨论群.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 上周热点回顾(1.20-1.26)