微信小程序——图片的加载与获取手机内部的图片

偏执的太偏执、 2024-04-24 14:43 56阅读 0赞

关于将手机里的图片放在上传到小程序，在小程序里这种方法并不陌生，甚至大多数小程序都附带有这种功能，那么这种功能是怎么实现的呢，一起来看看吧！！！

## 1.微信小程序加载图片的几种方法 ##

**1.本地图片的加载**

例如：本地路径：/pages/images/1.png

<image class="widget" src="/pages/images/1.png"></image>
    //此处可以通过mode来设置图片的放置方式

然后在wxss中设置自己需要的样式即可

![c2290d6a3b1348509749706848220079.png][]

关于mode的其他详情可以前往官方文档进行查看：[image | 微信开放文档 (qq.com)][image _ _ _qq.com]

**2.加载网络图片**

例如：网络图片地址为：[http://img1.3lian.com/2015/w7/85/d/101.jpg][http_img1.3lian.com_2015_w7_85_d_101.jpg]（此图片已无效）

然后在wxss中设置自己需要的样式即可

mode的使用方法如上

**3.使用本地svg图片（svg是可缩放矢量图形）**

详情可以进行以下链接查看：[小程序支持 SVG | 微信开放社区 (qq.com)][SVG _ _ _qq.com]

本地svg与本地图片的调用使用方法相同（svg相比较于图片更加清晰）

此处还可使用base64的方法将svg转化为base64的代码在wxss中使用

.skin-icon1 {
      width: 40rpx;
      height: 40rpx;
      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzg3MzVfMTI3NDM3KSI+CjxwYXRoIGQ9Ik0xMC4wMDAxIDE4LjMzMzRDMTQuNjAyNSAxOC4zMzM0IDE4LjMzMzQgMTQuNjAyNSAxOC4zMzM0IDEwLjAwMDFDMTguMzMzNCA1LjM5NzcxIDE0LjYwMjUgMS42NjY3NSAxMC4wMDAxIDEuNjY2NzVDNS4zOTc3MSAxLjY2Njc1IDEuNjY2NzUgNS4zOTc3MSAxLjY2Njc1IDEwLjAwMDFDMS42NjY3NSAxNC42MDI1IDUuMzk3NzEgMTguMzMzNCAxMC4wMDAxIDE4LjMzMzRaIiBzdHJva2U9IiM0QkRDQUIiIHN0cm9rZS13aWR0aD0iMS42NjY2NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0zLjc1IDE1LjQxNjdMNy4wODMzMyAxMS42NjY3TDEzLjc1IDE3LjA4MzQiIHN0cm9rZT0iIzRCRENBQiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuNDk5OTIgOC43NTAwOEM4LjQyMDM5IDguNzUwMDggOS4xNjY1OSA4LjAwMzg5IDkuMTY2NTkgNy4wODM0MUM5LjE2NjU5IDYuMTYyOTQgOC40MjAzOSA1LjQxNjc1IDcuNDk5OTIgNS40MTY3NUM2LjU3OTQ0IDUuNDE2NzUgNS44MzMyNSA2LjE2Mjk0IDUuODMzMjUgNy4wODM0MUM1LjgzMzI1IDguMDAzODkgNi41Nzk0NCA4Ljc1MDA4IDcuNDk5OTIgOC43NTAwOFoiIHN0cm9rZT0iIzRCRENBQiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3Ii8+CjxwYXRoIGQ9Ik0xMCAxMy43NDk5TDEzLjMzMzMgOS41ODMyNUwxNy41IDEyLjkxNjYiIHN0cm9rZT0iIzRCRENBQiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF84NzM1XzEyNzQzNyI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");
      background-size: cover;
    }

![c4791b1f09834d0b989ac123970fc915.png][]

此处一样可以展示出图片效果，而且不会占据小程序内部的空间，是很不错的降低空间储存的方法

## 2.如何获取手机内部的图片 ##

以下部分为js代码，获取到你所上传图片的链接（此处链接的产生是微信自带的api返回的）

//从相册获取照片
        wx.chooseMedia({
          count: 1,
          mediaType: ['image'],
          sourceType: ['album'],
          sizeType: ['original'],
          success(res) {
            var tempFilePath = res.tempFiles[0].tempFilePath;
            try {
              const FileSystemManager = wx.getFileSystemManager();
              var url = FileSystemManager.saveFileSync(tempFilePath, wx.env.USER_DATA_PATH + '/' + tempFilePath.replace("wxfile://", ""));
              this.setData({
                picture: url
              });
            } catch {
              wx.showToast({
                title: '设置失败',
                icon: 'error',
                duration: 2000
              });
            }
          },
          fail() {
            wx.showToast({
              title: '上传失败',
              icon: 'error',
              duration: 2000
            });
          }
        });

在此处拿到链接之后就可以将其渲染到主页面上了

<image class="ima" src="{
       {picture}}" mode="aspectFill"></image>

这里此处由于自定义图片位于个性换肤界面与需要渲染的页面距离较远，故采用存缓存的方式，将图片链接先储存在缓存之中，在返回主页面的时候小程序在监听到返回主页面时会触发onshow函数，故将读取缓存的位置放在onshow函数中即可拿到对应的图片链接，然后将其设置给picture这个变量即可，在wxml页面通过\{ \{picture\}\}来引用picture里面的链接地址，即可完成图片背景的自定义设置啦！同样可以通过class选择器来实现对图片样式的设置

关于更多的详情可查看微信小程序官方文档：[wx.chooseMedia(Object object) | 微信开放文档 (qq.com)][wx.chooseMedia_Object object_ _ _ _qq.com]

## 3.总结 ##

此处知识点的总结希望可以帮到各位刚入门的开发者们，总体来说此处的知识点并不复杂，加以练习便可熟练的掌握啦，那各位咱们下次再见了，期待和各位一起变强！！！![5f4d803eb27f4c369a5aad6e0df19278.jpeg][]

[c2290d6a3b1348509749706848220079.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/658b1ce2888842c0b5eeb66c60db39a8.png
[image _ _ _qq.com]: https://developers.weixin.qq.com/miniprogram/dev/component/image.html
[http_img1.3lian.com_2015_w7_85_d_101.jpg]: http://img1.3lian.com/2015/w7/85/d/101.jpg
[SVG _ _ _qq.com]: https://developers.weixin.qq.com/community/develop/article/doc/000ca493bc09c0d03a8827b9b5b013
[c4791b1f09834d0b989ac123970fc915.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/75995be4ad63472dace36aff9a5bd959.png
[wx.chooseMedia_Object object_ _ _ _qq.com]: https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
[5f4d803eb27f4c369a5aad6e0df19278.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/1870736ace5b4eb58a2e1a70b79b22b9.jpeg