微信小程序> 微信小程序图片使用示例

微信小程序图片使用示例

浏览量:1316 时间: 来源:祈澈菇凉

小程序官方API:https://developers.weixin.qq.com/miniprogram/dev/component/image.html

1:加载本地文件夹图片

     <image  src="/image/pig.jpg" mode="aspectFill">       </image>  

 

2:加载服务器图片

wxml:

    <image  src="{{imageUrl}}" mode="aspectFill">      </image>  

js:

Page({  data: {    imageUrl: "http://www.intmote.com/timg.jpg",      },

 

或者直接在wxml写代码:

    <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干货大全。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎