小程序背景图片的坑

本人是前端菜鸟一个,比小白还要白,这完全是自己的经验总结,并不是要给各位分享什么宝贵经验哈,各位大佬不喜勿喷,不然会打击到我的哈哈

因为公司要求做几个小程序的页面,我不得不拾起丢弃了几个月的小程序开发,但我也不是有很丰富的小程序开发经验,算是入门级别吧

问题描述:在wxss文件引入背景图片不成功

因为小程序的首页就要用到背景图片,所以一开始我就卡死了。根据以往html开发经验,我们只要在css文件某个div的属性background-image这里引入背景图片就行。but...,然并卵,小程序出现这样的错误,文档解析


对的,这个错误提示已经很明显了,本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签。提到的第一个方法,就是把图片上传到服务器,用服务器上图片的链接代替,这个方法比较麻烦,我就放弃了。第二个方法就是转换成base64


然后把编码全部拷贝放到属性background-image当中,即background-image:url("编码")。这个方法虽说挺简单方便,但是一大串编码放到wxss文件当中,会造成视觉疲劳,更有密集恐惧这恐怕会摔电脑吧哈哈,所以只能另辟蹊径。我想既然不能在wxss文件中引入本地资源图片,那在wxml文件总可以吧,这时候我想到了行内样式,像这样

<view class='banner' style="background-image:url('asset/images/banner.jpg');">复制代码

果不其然,成功了,背景图片终于显示出来了,爽歪歪.....可惜是我高兴得太早了。正当我打开手机预览页面时,我又要崩溃了,背景图片显示不出来。。。。。

问题描述:背景图片在开发者工具中可以显示,在真机上看不到

我又上网找解决方法,后来发现只要把那个页面的4个文件都放在根目录就可以了,例如


问题迎刃而解。。。。。



转载于:https://juejin.im/post/5c98f0d86fb9a070f6534f9c

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275517.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SimpleAdapter类使用方法

SimpleAdapter的构造函数是&#xff1a; public SimpleAdapter (Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to) 官方说明了其各个参数含义&#xff0c;我这里根据自己的理解解释下&#xff1a; 第一个context&…

小程序 富文本自适应屏幕_自适应文本:跨屏幕尺寸构建可读文本

小程序 富文本自适应屏幕Many of you may already know about responsive web design. Cited from Wikipedia, responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and windows or screen sizes. The respon…

Vue、React 之间如何实现代码移植?

大家好&#xff0c;我是若川。面对前端最火的两个框架&#xff0c;学 React 还是 Vue &#xff1f;这可能是每个前端人都曾纠结过的问题。不过&#xff0c;现在你不用纠结了——因为很多公司都是两个框架都有大量的应用&#xff0c;取决于不同团队的技术选型&#xff0c;特别是…

linux mariadb 乱码,配置mariadb远程访问权限,解决数据库乱码问题

配置mariadb远程访问权限&#xff1a;1)登录数据库:# mysql -uroot -p2)配置授权数据库用户远程访问权限&#xff0c;%表示所有远程IP&#xff0c;也可以指定IP。WITH GRANT OPTION表示mysql数据库的grant表中重新加载权限数据&#xff1a;GRANT ALL PRIVILEGES ON *.* TO 用户…

平面设计师和ui设计师_游戏设计师的平面设计

平面设计师和ui设计师Design is a very ancient practice, but graphic design really found its core principles post World War One. Games are also very ancient but video games are still finding their feet. I think graphic design has a few things to teach people…

从零开发一个命令行脚手架工具 等

大家好&#xff0c;我是若川。今天周末&#xff0c;话不多说&#xff0c;这一次花了几小时精心为大家挑选了20余篇好文&#xff0c;供大家阅读学习。本文阅读技巧&#xff0c;先粗看标题&#xff0c;感兴趣可以都关注一波&#xff0c;绝对不亏。前端宇宙小编就职于某大厂&#…

linux的HAL库函数,STM32 HAL库 IIC 协议库函数

/* 第1个参数为I2C操作句柄第2个参数为从机设备地址第3个参数为从机寄存器地址第4个参数为从机寄存器地址长度第5个参数为发送的数据的起始地址第6个参数为传输数据的大小第7个参数为操作超时时间 */HAL_I2C_Mem_Write(&hi2c2,salve_add,0,0,PA_BUFF,sizeof(PA_BUFF),0x10)…

pku acm 2140 Herd Sums http://acm.pku.edu.cn/JudgeOnline/problem?id=2140

2140代码短小精悍&#xff1a;#include<stdio.h> int main() { int cnt0,i; long s; scanf("%ld",&s); for(i1;(i1)*i/2<s;i)if((s-(i-1)*i/2)%i0)cnt; printf("%d\n",cnt); return 0; }转载于:https://www.cnblogs.com/Chinese-Coder-C…

java合成海报的工具类

2019独角兽企业重金招聘Python工程师标准>>> package io.renren.common.utils;import cn.hutool.core.lang.Console; import io.renren.modules.oss.cloud.OSSFactory;import javax.imageio.ImageIO; import javax.imageio.stream.ImageOutputStream; import java.a…

a说b说谎b说c说谎说d说_说谎的眼睛及其同伙

a说b说谎b说c说谎说d说The eye is a complex and temperamental organ. By the end of this article, designers will have a better understanding of how the eye works with the brain, how it deconstructs images that the brain stitches back up again, and how the two…

一名运营,自学一年前端,成功入职杭州某独角兽企业,他的面试经验和学习方法等分享...

大家好&#xff0c;我是若川。这是我的微信群里小伙伴年年 的投稿。他是19年毕业&#xff0c;之前做的是运营相关的工作&#xff0c;在我的交流群里非常活跃&#xff0c;自学一年前端&#xff0c;目前成功转行入职杭州一家独角兽企业。相信他的文章能带给大家一些启发和激励。0…

linux下svn relocate,如何进行svn relocate 操作

1。进入工作复本&#xff03;> cd ~/test2。查看仓库地址(URL)&#xff03;> svn info路径&#xff1a;.地址(URL)&#xff1a;http://192.168.28.1/repos/test档案库 UUID&#xff1a;a81f9bed-3506-0410-b369-e50476f75162修订版&#xff1a;44节点种类&#xff1a;目录…

教你怎么买虚拟空间(转)

虚拟空间是什么?经常听到站长们在群里问&#xff0c;哪里的虚拟空间好?哪里的虚拟空间性能好?哪里的虚拟空间便宜?虚拟空间是当今IDC行业的一个重要销售产品&#xff0c;虚拟空间也是中国站长们建设网站中最常应用的网站载体。各种数据说明&#xff0c;虚拟空间的好坏能影响…

React笔记-事件分发

事件分发 之前讲述了事件如何绑定在document上&#xff0c;那么具体事件触发的时候是如何分发到具体的监听者呢&#xff1f;我们接着上次注册的事件代理看。当我点击update counter按钮时&#xff0c;触发注册的click事件代理。 function dispatchInteractiveEvent(topLevelTyp…

百度指数可视化_可视化指数

百度指数可视化Abstract:– Analysis of the visual representations of exponentials.– Proposals to solve current visualization issues.– Call to discussion to come up with a better visual representation convention.抽象&#xff1a; –分析指数的视觉表示形式。…

qemu+linux+x86+64,kvm 内部错误:无法找到适合 x86_64 的模拟器

本文将为您描述kvm 内部错误&#xff1a;无法找到适合 x86_64 的模拟器,教程操作方法:0x00 问题安装完 KVM 之后&#xff0c;启动管理工具报错&#xff1a;内部错误&#xff1a;无法找到适合 x86_64 的模拟器于是查看 libvirtd 服务状态&#xff0c;查看到以下内容&#xff1a;…

阿里云谦大佬:时间精力有限的情况下如何高效学习前端?

大家好&#xff0c;我是若川。最近组织了源码共读活动1个月&#xff0c;200人&#xff0c;一起读了4周源码&#xff0c;欢迎加我微信 ruochuan12 进群参与。今天分享一篇阿里云谦大佬的文章。昨天在群里也有小伙伴说到&#xff1a;大佬们是需要什么学什么&#xff0c;新手一般是…

JQuery小记

访问dom元素 $代表整个dom tree $("#content") $("p") $("li .red") 字符串转换为json对象 $.parseJSON ajax $.ajax({type: "post",url: "GetUser.ashx",success: function (data) {var t "";var json $.pars…

React个人整理

React基础//ReactDOM.render(reactWhat,domWhere)在浏览器中渲染应用的一种途径 //React.DOM表示预定义好的HTML元素集合 //React.DOM.h1(attributes,children)表示一个预定义的React 组件 //h1()第一个参数接收一个对象&#xff0c;用于指定该组件的任何属性&#xff08;比如i…

sketch钢笔工具_Sketch和Figma,不同的工具等于不同的结果

sketch钢笔工具We like to compare the difference between various design programs and debate about which one is the most powerful. But we often forget to reflect on how using one of these tools is impacting our product. A powerful artist would say that he ca…