uniapp开发微信小程序报错：本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用「image/」标签

最新推荐文章于 2024-06-21 20:51:29 发布
最新推荐文章于 2024-06-21 20:51:29 发布
阅读量3.1k 收藏 2
点赞数
分类专栏： uniapp 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43814020/article/details/107205636
版权

微信小程序不能使用background-image问题解决。
在这里插入图片描述
解决办法：
1.将图片bg3.jpg 转换为base64，转换地址http://tool.chinaz.com/tools/imgtobase，不行的话，网上自行搜索 图片转Base64，在这里把要使用的图片转换一把，然后将得到的字符放到background-image属性值中，如下图，不过这个字符串也太长了点
在这里插入图片描述
2.在背景图片中，使用图片的网络路径，可将图片上传至https://imgchr.com/，然后获取图片URL地址，填入代码中
这样微信小程序就可以正常显示图片了
在这里插入图片描述
在这里插入图片描述

小阿兜
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序聊天界面(可以发送表情、视频、图片)
11-07
图片的显示可以使用微信小程序的“<image/>”组件，支持懒加载和预览功能。 7. 事件处理： 每个功能的触发都需要绑定相应的事件处理器，例如点击发送按钮触发消息发送，点击表情选择器打开表情面板，滑动消息列表...
微信小程序图片裁剪demo
02-22
在微信小程序中，我们可以通过`wx.createSelectorQuery()`选择Canvas元素，然后使用`getContext('2d')`获取2D绘图上下文。在2D绘图上下文中，可以使用`drawImage()`方法将图片绘制到Canvas上，并通过`clip()`定义...
【uniapp】本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用image标签
cc蒲公英的博客
11-21 1413
【uniapp】本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用image标签
wxss无法使用本地图片 uniapp do-not-use-local-path
IT匠人的博客
10-21 3477
微信小程序使用background-image没有图片显示 报错信息：图片-do-not-use-local-path pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取 解决方法：可以使用网络图片，或者 base64，或者使用标签。 .container { display: flex; background-repeat:no-repeat; background-image: url('../../images/user_bg.jpg'
uniapp开发微信小程序报错【本地资源图片无法通过 WXSS 获取】
最新发布
qq_44741577的博客
06-21 529
先看uniapp官网对背景图片的说明。
uniapp开发 微信小程序 本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用image标签。
w161513820的博客
09-21 2375
uniapp开发 微信小程序 本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用image标签。
uni-app踩坑之background-image
weixin_45267702的博客
11-24 3862
uni-app踩坑之background-image css写法 js写法 注意： url(${ImgBdg}) <view class="background":style="{backgroundImage:`url(${ImgBdg})`,backgroundSize: 'cover',}">
uni-app background 使用本地图片
weixin_46400038的博客
12-02 4253
解释：css背景图片不能使用本地图片，官方给的理由是小程序不支持本地图片，只支持网络访问或者base64。 所以uniapp也不支持，但是只要不超过40kb即可。 注意：把下面导入的图片路径改成你自己的。 还有：如果图片大小超过40kb是不会自动转换的，需要程序员自己吧图片转换成base64格式 <template> <view :style="{backgroundImage:`url(${indexBackgroundImage})`,backgroundSize: 'cov.
uni-app 背景图片 background-image
josiecici的博客
09-11 3257
方法一：（支持相对路径） 方法二：（不支持相对路径）
微信小程序学习用demo：XX周期；添加本地图片，选择日期
05-04
2. **图片处理**：`wx.getImageInfo`接口可以获取图片的尺寸信息，而`wx.resizeImage`接口则可以对图片进行裁剪和缩放，以便适应小程序的显示需求。如果需要上传到服务器，通常需要将图片转为Base64编码或者进行压缩...
微信小程序开发背景图显示功能
11-30
这两天开发微信小程序，在设置背景图片时，发现在wxss里面设置 background-image:(url) 属性，不管是开发工具还是线上都无法显示。经过查资料发现，background-image 只能用网络url或者base64图片编码 ， 本地图片...
微信小程序自定义波浪组件使用方法详解
10-16
为了在微信小程序中使用SVG图像，需要将其转换为base64编码并嵌入到CSS中。这一步在`wave.wxss`中完成，例如： ```css .water-1 { background: url("data:image/svg+xml;base64,..."); } ``` 接着是`wave.js`，...
uniapp 提供了一种运行于视图层的专属js，微信叫做wxs
柑橘乌云_
10-30 442
里有几个谜一样的存在，微信的、支付宝的、百度的。很多开发者都不明白为什么要造这种语言脚本的轮子出来，甚至很多开发者根本不知道它们的存在。其实几大小程序平台创造它们，都是为了解决性能问题，但不得不吐槽下，设计的实在是很难用，文档也语焉不详。uni-app支持将WXSSJSFilter编译到这3家小程序平台，同时还在App和H5实现了WXS的解析。为什么做这些事？也是为了性能。uni-ui库新版中的组件，就是列表项向左滑动时拉出几个挤压式联动的菜单按钮，这种流畅的跟手动画，正是借助于WXS机制实现的。
uni-app 背景图片处理
Mrswater的博客
07-24 2174
1，在uni-app中想要为一个view添加一个背景图，常规下我们会这样做 然后后发现报错；提示我们使用网络图片，或者base64，或者<image/>标签，（但是有些模块还是需要写成背景图这样方便，所以我们这里可以使用base64） 2,在新建一个scss文件集中管理这些base64的图片 在uni.scss里面引入 在页面里引用 注意：页面内的style标签，不要忘记写lang=scss ；否则就无法引入图片base64编码的变量 ...
解决uniapp微信开发小程序背景本地图片渲染层网络层错误问题
zzDAYTOY的博客
12-22 3296
一、首先看一下我们的源代码和报错原因 1.1源代码是这个样子的 1.2先来看下我们的页面 1.2.1原设计图是这个样子的 1.2.2而此时我们的页面 1.3然后来看下我们的报错 二、解决方法 2.1先来看下我们的源代码 把原有的background-image: url(../../static/img/hd2.png);剪切掉 放到我们的template中的布局中 2.2 然后再来看下我们的页面 此方法是自己试出来的如果有效果的话请劳烦您的小手点个赞！！ ...
解决 uniapp 开发微信小程序 不能使用本地图片作为背景图 问题
yangqii的博客
11-17 3122
使用微信小程序自带转换方法wx.getFileSystemManager().readFileSync(img, 'base64')在vue文件中调用 urlToBase64 方法，这边默认图片都放在 static 文件夹下。在静态资源文件夹下创建sass文件，如 base64-img-store.scss。在uni.scss文件中引入 base64-img-store.scss。将转换后的base64编码放到对应url里，样式变量名称可自行定义。vue文件<style lang="scss">中使用。
uni-app微信小程序image引入图片；background-image背景图引入图片；小程序预览本地图片；小程序图片过大引入报错；获取本地图片的网络地址；
热门推荐
i_am_a_div的博客
07-21 2万+
uni-app小程序图片使用有image标签和background-image背景图两种方式： 下有获取本地图片的网络地址方式：见第四步 一、方式一：使用image标签引入： 1.官方文档说：src 仅支持相对路径、绝对路径，支持 base64 码；但是我使用了网络地址https也可以显示 目前支持以下四种方式引入： <view>引入image的绝对路径src：</view> <image src="~@/static/iconimg/big.png"
uniapp背景图本地文件不显示问题（简单实用）
...
09-03 2322
uniapp背景图本地文件不显示问题（简单实用）
pages/discover/discover.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签。
05-26
是的，微信小程序中，WXSS样式文件中引用本地图片的方式是有限制的。具体来说，WXSS样式文件中使用`background-image`属性引用本地图片时，只能引用项目目录下的图片文件，并且路径必须使用相对路径。 如果想要在WXSS文件中引用其他位置的图片，可以使用以下方式之一： 1. 使用网络图片：将图片上传到云存储或者其他服务器，并通过网络地址引用。 ```css .container { background-image: url("https://example.com/images/bg.jpg"); background-size: cover; } ``` 2. 使用base64编码：将图片转换为base64编码，并在样式文件中直接引用编码后的字符串。 ```css .container { background-image: url("data:image/png;base64,iVBORw0KGg..."); background-size: cover; } ``` 3. 使用`<image/>`标签：在WXML文件中使用`<image/>`标签，直接引用图片文件，并设置样式。 ```html <view class="container"> <image src="/images/bg.jpg" class="bg"></image> <view class="content">这是内容</view> </view> ``` ```css .bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } ``` 其中，第三种方式是比较推荐的，因为它不会影响样式的渲染效率，且可以灵活控制图片的显示效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值