前言

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

框架使用的是美团的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. Spring MVC自定义403,404,500状态码返回页面

    代码 HTTP状态码干货:http://tool.oschina.net/commons?type=5 import org.springframework.boot.web.servlet.erro ...

  2. Wannafly挑战赛28

    总结- A-开始觉得是找规律,最开始模拟当时我觉得如果L达到1e9的范围的话,岂不是要加1e9次,模拟也就没有认真写,现在想来,后面由于加的不再是1,而是我前面的值,这样相当了一个斐波那契的类型,而斐 ...

  3. Randomized Online PCA Algorithms with Regret Bounds that are Logarithmic in the Dimension

    目录 Setup of Batch PCA and Online PCA Hedge Algorithm 改进算法 用于矩阵 \(rounding()\) 前俩次,都用到了\(rounding()\) ...

  4. plw的晚餐(毒瘤题害我暴0)

    题意 描述 plw吃完午饭之后,马上又觉得肚子饿了.他决定马上从美食区离开,赶往下一个吃饭地点"香香鸡".但是在plw离开离开美食区之前,需要按美食区的规矩画一个特殊符号,并且如果 ...

  5. sso单点登录系统(解决session共享)

    场景:假设一个用户将自己的登录信息提交到后台,如果session保存的信息分布在多台机器上,并且不共享,那么可能导致用户的登录信息出现短暂的丢失,为什么这样讲,因为用户访问服务器中间还要经过负载均衡服 ...

  6. 聊一聊跨域,Vue向Django请求数据的一些问题

    1.做前后端分离 前端使用Vue程序,后端使用Django配合rest-framework. 那么前端Vue通过API接口拿到数据会出现跨域的问题,JSONP只是在get中会用到的,所以这里使用cor ...

  7. Linux 典型应用之Mysql

    Mysql 的安装及连接 删除默认安装的 mariadb数据库 yum remove mariadb-libs.x86_64 mysql源下载的网址 https://dev.mysql.com/dow ...

  8. ansible jenkins war

    Ansible is Simple IT Automationhttps://www.ansible.com/ Ansible中文权威指南- 国内最专业的Ansible中文官方学习手册http://a ...

  9. MYSQL业务数据简单脱敏方案

    removesensitiveinformationplan.sh #!/bin/sh #!在模拟库上运行如下脚本 #!生产库crm-db #!模拟库crm-mock #!.备份生产库 mysqldu ...

  10. httpd sshd firewalld 服务后面的d的意思

    在操作系统中,一般系统的服务都是以后台进程的方式存在,而且都会常驻系统中,直到关机才结束.这类服务也称Daemon,在Linux系统中就包含许多的Daemon. 判断Daemon最简单的方法就是从名称 ...