微信小程序图片使用示例

本文介绍了微信小程序中图片的三种加载方式:1) 本地文件夹图片加载,通过`<image>`组件指定图片路径;2) 服务器图片加载,通过设置`src`属性为图片URL,或直接在WXML中写入URL;3) 设置页面背景图片,可通过外链或Base64编码实现,并提供了转换工具链接。

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

1:加载本地文件夹图片

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

</image> mnn

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文件进行引用即可;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值