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

素颜马尾好姑娘i 2023-03-02 13:26 709阅读 0赞

## 报错过程 ##

**index.wxml**

**index.wxss**

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

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

## 第一种 ##

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

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

**index.wxml**

**index.wxss**

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

## 第二种 ##

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

**index.wxml**

**index.wxss**

/* .bg {...} */

## 第三种（不推荐） ##

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

将本地图片通过 [第三方平台][Link 1] 转为 `Base64` ，然后放入路径里，具体实现如下：

**首先转换：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]  
**然后放入：**

**index.wxml**

**index.wxss**

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]: /images/20230208/13631226e963446891cd7bd3a318d61c.png
[Link 1]: http://tool.chinaz.com/tools/imgtobase
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]: /images/20230208/975cd1b72017481a8781742a8d09980f.png