微信小程序图片使用示例
小程序官方API:https://developers.weixin.qq.com/miniprogram/dev/component/image.html
1:加载本地文件夹图片
<image src="/image/pig.jpg" mode="aspectFill">
</image>
![](https://upload-images.jianshu.io/upload_images/5640239-f661379e8a83edab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
2:加载服务器图片
wxml:
<image src="{{imageUrl}}" mode="aspectFill">
</image>
js:
Page({
data: {
imageUrl: "http://www.intmote.com/timg.jpg",
},
![](https://upload-images.jianshu.io/upload_images/5640239-9bda7a548ffe778d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
或者直接在wxml写代码:
<image src="http://www.intmote.com/timg.jpg" mode="aspectFill">
</image>
![](https://upload-images.jianshu.io/upload_images/5640239-65d7a0ef49e5c386.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700)
图片.png
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/05f416aefbe190后前端妹子,爱编程,爱运营,爱折腾。
关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源200G干货大全。公众号回复“1”,拉你进程序员技术讨论群