uni-app（小程序）背景图片的处理

╰+哭是因爲堅強的太久メ 2023-06-19 09:47 6阅读 0赞

做基于uni-app的微信小程序的时候，遇到了一点问题，uni-app（小程序）背景图片的处理一直报错。

## 背景怎么引用本地图片 ##

想要为`<view>`标签添加一个背景，常规做法：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70]然后就报错啦：本地资源图片无法通过WXSS获取，可以使用网络图片，或者base64,或者使用`<image/>`标签  
![在这里插入图片描述][20191205171656344.png]解决方案按照报错信息也给出来了：

1.  使用网络图片，找个图床把你要用的图片传上去，然后以网络图片的形式引入到你的项目里面。
2.  使用使用`<image/>`标签，这个就不多说了，image作为背景，用绝对定位分隔图层出来就可以实现，可行但是我初衷还是想要用background的形式引入背景图片。
3.  将图片转为base64，我用的是这个方法，网上有免费的在线转换器，比如：[http://imgbase64.duoshitong.com/][http_imgbase64.duoshitong.com]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70 1]上传图片，转换，复制得到的base64编码，然后粘贴到原来的`background:url(base64编码)`就可以了。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70 2]

## 集中处理base64编码的图片并引入 ##

上一步用图片转成base64的编码很长，放在vue文件里非常不美观，还有就是我的Hbuilder编辑器滚动时会因此卡顿，所以为了可持续发展，早早的把这些base64编码变量抽离出来。

1.  新建一个scss文件集中放这些base64编码图片  
    ![在这里插入图片描述][20191205174123186.png]
2.  在uni.scss文件中导入这个自定义文件，作为预处理变量  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70 3]
3.  在vue文件里用相应的变量来引入图片  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70 4]  
    这样就大功告成啦~  
    效果：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191205171447712.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg==,size_16,color_FFFFFF,t_70
[20191205171656344.png]: https://img-blog.csdnimg.cn/20191205171656344.png
[http_imgbase64.duoshitong.com]: http://imgbase64.duoshitong.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191205172849598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191205173314260.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg==,size_16,color_FFFFFF,t_70
[20191205174123186.png]: https://img-blog.csdnimg.cn/20191205174123186.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191205175254814.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191205175650193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191205175803536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BpaXNhYnV0Y2hlcg==,size_16,color_FFFFFF,t_70