返回

专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员
获取验证码
立即登录
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

微信小程序图片使用示例

2018-05-28 作者：秩名

微信小程序图片开发一般包括加载本地图片，加载服务器图片，已经背景图，那么微信小程序下面为大家介绍图片处理的常用的小程序图片使用样式。

微信小程序图片使用示例

1：加载本地文件夹图片

 


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




	 



	 



	2:加载服务器图片



	wxml:



	 




    
	
  1. 
		<image src="{{imageUrl}}" mode="aspectFill">
    2. 
	
  2. 
		</image>
    3. 




	js:



	 




    
	
  1. 
		Page({
    2. 
	
  2. 
		data: {
    3. 
	
  3. 
		imageUrl: "http://www.intmote.com/timg.jpg",
    4. 
	
  4. 
		 
    5. 
	
  5. 
		},
    6. 




	       g  或者直接在wxml写代码：



	 




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




	3：给小程序页面加载一张背景图片



	方法一：  使用背景图片的时候用网络图片，就是用外链的形式，比如你将这张图片放到你的服务器。



	方法二：  将背景图片使用编码base64进行转换，可以在这个网址进行http://tool.css-js.com/base64.html 转换，如：background-image: url("转换后得到的编码文本")，如果多次使用的话可以将该值设置为全局变量，再在js文件进行引用即可；



	90后前端妹子，爱编程，爱运营，爱折腾。  坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家加入群聊，一起探讨交流。


		

				

            
线上+线下+进销存+收银+会员门店零售管理好帮手

            
    
                
  • 
                    极速收银管理
                    
    门店能实现快速收银，提升门店经营效率。
    
                
    • 
                
  • 
                    进销存管理
                    
    系统自带进销存管理，更好管理库存销售。
    
                
    • 
                
  • 
                    软硬件一体化
                    
    配备收银硬件一站式整体服务。
    
                
    • 
            

            

                收 银
                会员管理
                库存管理
                商品管理
                交接班
                数据报表
                营销促单
                售后处理
                多种收款
            

            获取报价
        

		
	


	

		
推荐文章

		
	

	
	

	 门店系统
  获取报价
  立即咨询 
免费试用