微信小程序——引入背景图片【六】

前言

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

框架使用的是美团的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>

原文地址：https://www.cnblogs.com/wangyang0210/p/10411468.html

时间： 2024-07-29 02:29:37

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

微信小程序插入背景图片（将图片转为base64）

关于在微信小程序中插入背景图片,是不能将本地文件直接作为background-image的,要么使用网址链接,要么使用base64,这,考虑到小程序的大小问题,毕竟大小限制为2M的小程序是不可能有多余的空间留给background-image的(准确地来说是在样式文件中需要使用图片时不能直接用本地文件,在wxml中可以?). 使用网址链接简单,直接找到需要的图片,一般右键都会有复制图片链接之类的说一下将本地图片转为base64的操作(当然,并是不所有的图片转base64都合适,这比较适用于那个

小程序引入背景图片

小程序是无法通过WXSS获取本地资源,既是background-image: url("../../images/bg.png"); 是没有办法显示图片出来的. 解决办法: 一.用网络图片二.使用base64格式图片随便在网上找一个在线转换成base64的,把你的图片转换一下就可以直接引入了三.使用<image/>标签希望能帮到你,哈哈哈哈原文地址:https://www.cnblogs.com/mei1234/p/9704181.html

微信小程序动态绑定背景图片遇到的问题

问题简述: 问题代码:利用字符串模板显示图片路径的变量img 报错信息: 解决方法: 1.使用字符串拼接 2.效果正常显示,但是会报一个错误 3.这是因为初次加载的时候变量img默认是undefind,所以解决的方法是利用计算属性,动态的计算img值原文地址:https://www.cnblogs.com/ruilin/p/12543150.html

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

这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程序开发•系列文章四]模块化 [微信小程序开发•系列文章五]主界面 [微信小程序开发•系列文章六]生命周期和路由整个微信小程序从打开到关闭,整个过程可以分为很多阶段或者说状态,这一整段的过程,我们称之为小程序的生命周期.而周期中的每种不同的状态,到另一个状态的过度和转化,是需要一个触发机制的,这种机

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

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

微信小程序引入WeUI

WeUI 为微信小程序量身设计的UI库一.前言在做微信小程序的时候就想着找一个UI库,方便我们前端开发,然后查找资料,发现了这个WeUI特别适合放在微信小程序里.下面就简单的了解一下. WeUI是一套跟微信原生的视觉体验类似的一套样式库,由微信官方设计团队为微信内网页和小程序设计的,让用户视觉更加统一.包含了外卖常用标签的各种元素. 二.预览使用微信开发者工具打开weui-wxss-master 中的dist目录. 下载地址:https://github.com/Tencent/weui-

微信小程序引入外部组件 iView Weapp

iview Weapp组件的使用方法: 1. 下载小程序组件库 (前提是你已经有了项目目录) 你可以直接去github把iView Weapp的代码下载下来,也可以用过npm来下载. github地址:https://github.com/TalkingData/iview-weapp 2. 将组件库复制到工程的static目录下下载完成后,到它的目录中寻找名为dist的目录并复制到你的工程目录下,然后给这个dist目录改个名字,比如叫iview. 3. 为需要使用自定义组件的Page进行配

微信小程序——引入Vant组件库

背景在微信小程序开发过程中,使用第三方组件库,高效便捷的使用步骤安装npm 右键小程序根目录,打开终端输入:npm init Next 安装vant组件右键小程序根目录,打开终端输入:npm i @vant/weapp -S --production 构建npm 使用npm模块完成原文地址:https://www.cnblogs.com/zuiyue_jing/p/12260245.html

微信小程序加载图片时，先拉长，再恢复正常

今天在写小程序,发现小程序的图片image如过mode设置为widthFix的话, 加载图片会被先拉伸,后恢复正常我的处理方法是,给他一个初始的height值,或者就直接 height:auto 原文地址:https://www.cnblogs.com/bing0709/p/10729449.html