当前位置： 移动技术网 > 互联网>腾讯>微信 > 微信小程序 - “本地资源图片无法通过WXSS 获取，可以使用网络图片，或者 base64，或者使用标签” 解决

微信小程序 - “本地资源图片无法通过WXSS 获取，可以使用网络图片，或者 base64，或者使用标签” 解决

2020年07月31日  | 移动技术网互联网  | 我要评论
报错过程index.wxml<view class="bg"></view>index.wxss.bg { background:url('/images/banner/one.jpg')}然后就报错了：具体不知道微信为什么做出这样的限制，但是有 三种办法 可以解决，具体请继续看。第一种可把图片上传放在 CSDN 文章内，然后 F12 拿到图片地址。最简单，直接使用网络图片的 绝对路径（http://xxx），具体实现如下：index.wxml&

报错过程

index.wxml

<view class="bg"></view>

index.wxss

.bg {
  background:url('/images/banner/one.jpg')
}

然后就报错了：
在这里插入图片描述
具体不知道微信为什么做出这样的限制，但是有 三种办法 可以解决，具体请继续看。

第一种

可把图片上传放在 CSDN 文章内，然后 F12 拿到图片地址。

最简单，直接使用网络图片的 绝对路径（http://xxx），具体实现如下：

index.wxml

<view class="bg"></view>

index.wxss

.bg {
  background:url('https://static.easyicon.net/preview/128/1289279.jpg')
}

第二种

直接将 style 样式写在标签里，这样就不会在 CSS 中编译了，具体实现如下：

index.wxml

<view style=" background:url('https://static.easyicon.net/preview/128/1289279.jpg')"></view>

index.wxss

/* .bg {...} */

第三种（不推荐）

这种方式不推荐，繁琐且效果差（就因为一个图片多了一大坨代码。。。这绝对不行。。）

将本地图片通过 转为 Base64 ，然后放入路径里，具体实现如下：

首先转换：
在这里插入图片描述
然后放入：

index.wxml

<view class="bg"></view>

index.wxss

.bg {
  background:url('data:image/jpg;base64,/9j/4AAQSkZJR[此处省略几万个字符]')
}

本文地址：https://blog.csdn.net/weixin_44198965/article/details/107672275

您可能感兴趣的文章:

如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网