小程序 | background-image无法获取本地资源图片

最新推荐文章于 2023-11-21 10:50:48 发布
原创 最新推荐文章于 2023-11-21 10:50:48 发布 · 5.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在使用WXSS时遇到的本地图片加载问题，并提供了两种解决方案：一是上传图片到网络并使用URL链接；二是将图片转换为Base64编码。

用background-image获取本地资源图片时，会出现以下报错


官方文档写明了本地资源无法通过 WXSS 获取，但是可以用网络图片，或者 base64

  1. 网络图片
    https://thyrsi.com/#upload
    将图片传上去，然后将外链地址复制到url
  2. base64
    http://base64.xpcha.com/
    将图片传上去，然后将转码复制到url（转码后比较长，所以我通常选择用网络图片）

以上两个网址都是随便搜的，如果有更好用的请砸过来

微信小程序 - “本地资源图片无法通过WXSS 获取，可以使用网络图片，或者 base64，或者使用标签” 解决
🏆 前端领域优质创作者
10-24 1988
这种方式不推荐，繁琐且效果差（就因为一个图片多了一大坨代码。具体不知道微信为什么做出这样的限制，但是有。可把图片上传放在 优快云 文章内，然后。样式写在标签里，这样就不会在。最简单，直接使用网络图片的。可以解决，具体请继续看。
background系列使用
no_name_sky的博客
06-22 1072
backgroud-image使用 将本地照片传递到background-image属性中，会在div中显示背景照片，如果照片大小和设定的大小不一致，会出现平铺现象。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ h
uniapp本地图片用background-img无法显示原因
weixin_64042638的博客
06-04 3840
2.在onLoad，用getImageInfo方法，也可以显示图片（个人觉得和base64方式差不多）原因：是因为本地的背景图片过大，uniapp仅支持、base64或网络地址图片方式。3.就是要用到base64的方式了，要安装。这一个插件，然后在里。base64就在控制台出来了。1.就用标签。最后在onLoad里。
微信小程序--background-image直接设置本地图片路径，编辑器正常显示，真机运行不显示解决方法
wsdxho的博客
10-14 9923
项目场景： 微信小程序，设置background-image直接设置本地图片路径。 问题描述： 编辑器正常显示，真机运行不显示 原因分析： background-image只能用网络url或者base64图片编码。 解决方案： 1、将本地图片转为网络url后设置到background-image上 例如，云开发，后台上传本地图片 2、本地图片转成base64格式后设置到background-image上 3、弃用background-image赋值的方式，改用 image组件标
微信小程序 本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用image标签。
reg183的专栏
02-23 4157
微信小程序不能使用background-image问题解决。 pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用标签。 将图片user_bg.jpg 转换为base64，地址http://tool.chinaz.com/tools/imgtobase/在这里把要使用的图片转换一把，然后将得到的字符放到background-image属性值中： 图片转换为Base64 background-i...
uniapp开发小程序的background-image如何使用本地图片
12-31
### UniApp 小程序中使用本地图片作为 `background-image` 的方法 在 UniApp 开发的小程序中，要将本地图片设置为背景图，可以采用如下几种方式： #### 方式一：通过相对路径引用资源文件夹中的图片 如果项目中有...
微信小程序 background-image的图片真机调试和体验版中无法加载
秋楓的博客
03-07 2135
前言 在我的微信小程序项目中,我一般在引用静态本地资源时用相对路径，然后我就碰到一个坑：我在给一个view添加背景图时，本地查看效果正常，但是使用真机调试或者体验版查看是加载不出来的。 原先代码 <view style="background-image:url("../../images/pics/bg_img.png')"> </view> 解决方案 说明:注意不要以...
微信小程序在使用background-image设置背景图时报错：渲染层网络层错误
fangqi20170515的博客
10-18 2313
将image标签通过定位实现背景图的效果。
[渲染层网络层错误] pages/tabs/learn/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签。请参考文档：https://developers.weixin.qq.com/miniprogram/dev/qa.html#%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90%E6%97%A0%E6%B3%95%E9%80%9A%E8%BF%87-wxss-%E8%8E%B7%E5%8F%96 185 | .learn-head.data-v-7c13adaf { 186 | padding: 48rpx 32rpx 140rpx; > 187 | background-image: url(/static/img/learn/head-bg.png); | ^ 188 | background-repeat: no-repeat; 189 | background-size: 100% 100%; 190 | position: relative;(env: Windows,mp,1.06.2504010; lib: 3.9.0)
最新发布
08-12
在微信小程序中，`WXSS` 文件引用本地图片资源时，路径的设置需遵循一定的规则，否则会导致资源无法加载。以下是解决 `pages/tabs/learn/index.wxss` 文件中 `background-image` 无法加载本地图片问题的分析与解决...
微信小程序 background-image直接设置本地图片路径，编辑器正常显示，真机运行不显示解决方法
油焖茄子 的博客
07-28 4197
3、弃用background-image赋值的方式，改用 image组件标签src属性。2、本地图片转成base64格式后设置到background-image上。微信小程序，设置background-image直接设置本地图片路径。1、将本地图片转为网络url后设置到background-image上。background-image只能用网络url或者。编辑器正常显示，真机运行不显示。例如，云开发，后台上传本地图片。
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"
微信小程序background-image不能直接指定本地图片
weixin_34082789的博客
10-24 6127
2019独角兽企业重金招聘Python工程师标准>>> ...
【小程序】background-image无法获取本地资源图片
Stella的博客
03-23 1万+
今天在弄小程序导入图片的时候，突然发现了无法正常导入本地图片，而且换了几张图也不行，最后通过下面的方法便解决了这个问题。 用background-image获取本地资源图片时，会出现以下报错 官方文档写明了本地资源无法通过 WXSS 获取，但是可以用网络图片，或者 base64 网络图片 http://www.moepan.net/ 将图片传上去，然后将外链地址复制到url...
【uniapp】本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用image标签
cc蒲公英的博客
11-21 2559
【uniapp】本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用image标签
以图片作为背景的属性php,html中background-image属性的设置
weixin_34369657的博客
04-11 1128
background-image 属性允许指定一个图片展示在背景中。可以和 background-color 连用，因此如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。代码很简单，只需要记住，路径是相对于样式表的，因此以下的代码中，图片和样式表是 在同一个目录中的对于图片，首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样，那么就从CSS控制背景图片讲起吧。定义...
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值