专栏首页编程微刊微信小程序图片使用示例

微信小程序图片使用示例

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

1:加载本地文件夹图片

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

图片.png

2:加载服务器图片

wxml:

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

js:

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

图片.png

或者直接在wxml写代码:

    <image  src="http://www.intmote.com/timg.jpg" mode="aspectFill">  
    </image>  

图片.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/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家加入群聊,一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 程序员如何利用空闲时间挣零花钱一: 私活三: 写作四:教育培训

    王小婷
  • 程序员常用的六大技术博客类

    王小婷
  • Jquery前端分页插件pagination同步加载和异步加载

    王小婷
  • 七种HTTP头部设置保护你的网站应用安全

      现代的网络浏览器提供了很多的安全功能,旨在保护浏览器用户免受各种各样的威胁,如安装在他们设备上的恶意软件、监听他们网络流量的黑客以及恶意的钓鱼网站。

    lyb-geek
  • 看我如何窃取Messenger.com用户登录认证随机数并获得15000美元漏洞赏金

    www.messenger.com是Facebook旗下即时通讯软件Messenger官网,该网站中添加了基于随机数认证( nonce based login ...

    FB客服
  • 什么是函数重载?

    函数重载指的是一个作用域内的几个函数名字相同但是形参列表不同。这些函数执行操作类似,但是接受的形参类型不一样,编译器会根据传递的实参类型选择对应的函数调用。本文...

    编程珠玑
  • 2017年中国自动驾驶最全产业研究报告 99页 可下载

    用户1908973
  • 制作种子文件分享自己制作的基于最新版Win10的WinPE

    最开始想用最新稳定版μtorrent制作种子,但它在Server2016上有bug,双击了N多次,在后台任务管理器里有很多可执行文件,就是不出现界面,注销再试还...

    shawyang
  • 在CentOS8上编译安装开源EDA工具——Surelog

    Surelog是一个支持SystemVerilog 2017的Pre-processor、Parser、UHDM Compiler,可用于语法检查、仿真、综合、...

    ExASIC
  • 在CentOS8上安装Surelog

    Surelog是一个支持SystemVerilog 2017的Pre-processor、Parser、UHDM Compiler,可用于语法检查、仿真、综合、...

    ExASIC

扫码关注云+社区

领取腾讯云代金券