前言

之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了!

框架使用的是美团的mpvue,我也是一边学习,一边写的,如有错误之处,还望大家指出。

在这里我有个问题,为什么微信小程序不支持css里面直接导入本地图片作为背景图呢?

内联式

<view class="img" style="background-image: url(/static/images/draw.png)"></view>

外部引入

如果css是内嵌的或者外部引入的,那么背景图片就不能直接写本地地址,我这里是转存到七牛云后然后将外链写入,还有一种方式是将图片转为base64写入url()中

.img {
position: relative;
width: 340px;
height: 170px;
background-image: url("http://cache.wangyangyang.vip/draw.png");
background-size: 100%;
background-repeat: no-repeat;
// left: 18px;
top: -14px;
}

imgae标签

<image src="/static/images/game_count@3x.png" alt="参与场次"></image>

微信小程序——引入背景图片【六】的更多相关文章

  1. 微信小程序添加背景图片的坑

    给微信小程序页面加载背景图片解决方案 直接附上原文地址: 给微信小程序页面加载背景图片解决方案 - YUSIR 完美CODING世界 - CSDN博客  https://blog.csdn.net/y ...

  2. 微信小程序 - 动态背景图片实现

    很简单-就两步 wxml(遍历style的background-image路径即可) wxss(.ab)

  3. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  4. 微信小程序,前端大梦想(六)

    微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...

  5. 微信小程序点击图片放大预览

    微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...

  6. 微信小程序引入md5.js

    今天给大家安利一下微信小程序引入md5.js的方法,不多说 md5.js在下面 直接复制到项目的utils/md5.js即可 /* * A JavaScript implementation of t ...

  7. 微信小程序把玩(十六)form组件

    原文:微信小程序把玩(十六)form组件 form表单组件 是提交form内的所有选中属性的值,注意每个form表单内的组件都必须有name属性指定否则提交不上去,button中的type两个subm ...

  8. uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...

  9. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

随机推荐

  1. 朱晔的互联网架构实践心得S2E2:写业务代码最容易掉的10种坑

    我承认,本文的标题有一点标题党,特别是写业务代码,大家因为没有足够重视一些细节最容易调的坑(侧重Java,当然,本文说的这些点很多是不限制于语言的). 1.客户端的使用 我们在使用Redis.Elas ...

  2. python2.x版本与python3.x版本的区别以及运算符

    python2.x中: 重复代码,语言不统一,不支持中文 py2中除法获取的都是整形 py2中有long(长整形) print 可以加括号也可以不加括号 range 在py2中打印的结果是列表 py2 ...

  3. portscaner 多线程、多协程并发端口扫描

    import socket,time,re,sys,os,threading import gevent from gevent import monkey monkey.patch_all() so ...

  4. C#中委托,匿名函数,lamda表达式复习

    一.委托 1.就给类比较,类用class声明,委托用delegate声明. 2.委托要指向一个真正的方法. 3.委托的签名,要和指向的方法一样. //1.声明一个委托 public delegate ...

  5. c语言中字符串数组初始化的一点总结&& c++访问控制的三种方式

    char *c[]={"ONE","TWO","THREE","FOUR"}; // c语言中定义了一个字符串数组(也称 ...

  6. HNOI2013 BZOJ3144 切糕

    在n×m的表格上,在(x,y)填v的代价是w(x,y,v),且相邻格子填的数相差≤d.求填满表格的最小代价.n,m,maxv≤40. 每个点上选择一个数填,因此将上面的数串起来.考虑限制条件,矛盾条件 ...

  7. Java参数是值传递还是引用传递?

    先来看看参数是如何传递的. 一.参数的传递 1.基本类型的参数传递 public static void main(String[] args) { int a = 1; fun(a); } priv ...

  8. pinpoint vs druid

    主流Java数据库连接池分析(C3P0,DBCP,TomcatPool,BoneCP,Druid) - ppjj - 博客园 https://www.cnblogs.com/nizuimeiabc1/ ...

  9. Spring配置文件beans.xml头部配置解释

    Spring配置文件beans.xml头部配置解释 - EasonJim - 博客园https://www.cnblogs.com/EasonJim/p/6880329.html

  10. [转帖]pfSense软路由系统的使用

    图解pfSense软路由系统的使用(NAT功能) http://seanlook.com/2015/04/23/pfsense-usage/  发表于 2015-04-23 |  更新于: 2015- ...