微信小程序图片使用示例

小程序官方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

注:

原文作者:祈澈姑娘技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

公众号回复“1”,拉你进程序员技术讨论群.

posted @   前端视听  阅读(131)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.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)
点击右上角即可分享
微信分享提示