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

这篇具有很好参考价值的文章主要介绍了微信小程序——图片的加载与获取手机内部的图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

1.本地图片的加载

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

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

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

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

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

2.加载网络图片

例如:网络图片地址为:http://img1.3lian.com/2015/w7/85/d/101.jpg(此图片已无效)

<image class="widget" src="http://img1.3lian.com/2015/w7/85/d/101.jpg" mode="aspectFill"></image>

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

mode的使用方法如上

3.使用本地svg图片(svg是可缩放矢量图形)

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

<image class="number-icon" src="/static/svg/shandian.svg"></image>

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

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

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

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

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

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)

3.总结

此处知识点的总结希望可以帮到各位刚入门的开发者们,总体来说此处的知识点并不复杂,加以练习便可熟练的掌握啦,那各位咱们下次再见了,期待和各位一起变强!!!微信小程序——图片的加载与获取手机内部的图片文章来源地址https://www.toymoban.com/news/detail-443584.html

到了这里,关于微信小程序——图片的加载与获取手机内部的图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp , 微信小程序 图片加载时闪烁

    原因:小程序图片闪烁是因为图片没有高度,加载时从最高高度变到(加载完完成,展示图片时)最适合高度。 方法一:设置图片高度 方法二:全局设置图片自适应(效果:图片加载时会先忽略高度,加载出来再展示图片)

    2024年02月14日
    浏览(36)
  • 微信小程序保存图片到相册 微信小程序实现将图片保存到手机相册(方案一)

    目录 微信小程序实现将图片保存到手机相册(方案一) 微信小程序实现将图片保存到手机相册(方案二) 微信小程序之点击复制文本到剪贴板 微信小程序---判断是IOS还是安卓 微信小程序分享图片给微信好友 首先我们需要调用wx.downloadFile方法下载文件资源到本地,然后利用

    2023年04月20日
    浏览(63)
  • 微信小程序保存图片到相册 微信小程序实现将图片保存到手机相册(方案一)

    目录 微信小程序实现将图片保存到手机相册(方案一) 微信小程序实现将图片保存到手机相册(方案二) 微信小程序之点击复制文本到剪贴板 微信小程序---判断是IOS还是安卓 微信小程序分享图片给微信好友 首先我们需要调用wx.downloadFile方法下载文件资源到本地,然后利用

    2023年04月20日
    浏览(44)
  • 微信小程序如何利用createIntersectionObserver实现图片懒加载

    节点布局相交状态 API 可用于监听两个或多个组件节点在布局位置上的相交状态。这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。 节点布局相交状态 API中有一个 wx.createIntersectionObserver(Object this, Objectoptions) Api (支持版本 = 1.9.3),它的

    2024年02月04日
    浏览(65)
  • 微信小程序实现图片懒加载的4种方案

    实现图片懒加载可以提高小程序的性能和用户体验,是微信小程序开发中非常重要的一项优化手段。微信小程序实现图片懒加载的目的主要有以下几点: 提高页面加载速度:图片通常是页面中最耗时的资源,如果一次性加载所有图片,会导致页面加载速度变慢,从而影响用户

    2024年04月16日
    浏览(36)
  • 【微信小程序】image真机无法加载网络图片

    目录 背景 为什么微信小程序  技术思路 前端页面 吐槽 最终解决 今天把车停在了路边,可能是挡住了行人的路,被贴了个条,还留了个纸条——没有你的随车电话,我只能点电话举报你了。气的我牙痒痒! 只能回来自己撸一个挪车电话小工具!这样通过扫描二维码拨打电话

    2024年02月09日
    浏览(91)
  • 微信小程序获取手机号

    1、先新建vue页面  打开看到页面是下图 在method定义方法    源码: node.js文件下载解压后启动node app.js打开服务器即可 点击下载

    2024年02月02日
    浏览(50)
  • 微信小程序&会议OA-登录获取手机号流程&登录-小程序&导入微信小程序SDK(从微信小程序和会议OA登录获取手机号到登录小程序导入微信小程序SDK)

    目录 获取用户昵称头像和昵称 wx.getUserProfile bindgetuserinfo 登录过程 登录-小程序 wx.checkSession wx.login wx.request 后台 准备数据表 反向生成工具生成 准备封装前端传过来的数据 小程序服器配置 导入微信小程序SDK application.yml WxProperties WxConfig WxAuthController 登录-小程序 login.js user.j

    2024年02月04日
    浏览(54)
  • 【微信小程序】实现微信小程序登录(附源码)后端,微信小程序获取手机号

    登录简介 第一步:获取token 第二步:通过token拿用户信息 第三步:调用接口获取手机号 HttpClientUtil: WeChatUtil: controller层: service层: serviceImpl层: 登录简介        新版本微信小程序登录 是前端获取用户信息,不再是后端获取信息进行保存。所以后端要做的主要流程就是

    2024年04月23日
    浏览(63)
  • 关于微信小程序获取头像和昵称

    不知道为什么微信一直对开发者获取:微信头像+微信昵称。一直抱以限制态度,关于接口调用方法,也是一直在修改! open-type=“getUserInfo” 在2021年4月13日停用 wx.getUserInfo 在2021年4月28日停用 wx.getUserProfile 在2022年11月8日停用 但是如果你在接口 停用前 发布的,还可以正常使

    2023年04月08日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包