微信小程序商品图片失真解决

最新推荐文章于 2023-09-26 16:14:22 发布
最新推荐文章于 2023-09-26 16:14:22 发布
阅读量6k 收藏 3
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42657666/article/details/94009667
版权

在微信小程序的开发过程中,我们会遇到不同尺寸的图片,在容器大小规定的情况下,如果不对图片进行处理,会造成图片拉伸失真

微信小程序图片配置
图片mode设置
如果图片容器为1:1,图片比例为2:1
mode未设置,也就是默认的(不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素)
原图
微信上显示
这个不保持缩放比例,就可以看出宽度被压缩了一般,图片明显失真

而将mode改为 aspectFill (缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。)
在这里插入图片描述
不同的比例用不同的mode来适配

wakangda
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序canvas生成海报图片压缩和失真问题解决
开源世界
04-15 1305
微信小程序实现canvas按照原图等比例不失真绘制海报图，防止模糊 我这里的场景是收款二维码+收款背景图。 绘制二维码 我这里绘制二维码使用的 wxapp-qrcode ，也可以使用weapp-qrcode，基本是一样的，今天主要讲解适配不同屏幕尺寸的canvas。 onLoad: function (options) { const size = this.setCanvasSize() // 动态设置画布尺寸 this.createQrCode('www.iyouhun.com', "mycan
微信小程序——图片模糊加载整个过程（默认图>缩略图>原图）
WeiHan_Seven的博客
03-10 4349
图片加载的整个过程是这样的，当进入一个页面一般我们是没有图片链接的，所以需要先调用接口获取图片链接，再将图片加载渲染到image上，图片一般采用1.5倍资源图，所以大小都在30kb左右，这样图片加载渲染的时间非常短，可以忽略，但是碰到特殊需求尺寸非常大的图片就不能忽略，因此整个过程是这样的： 进入页面>>获取图片链接>>加载完毕 小图解决方案： 进入页面>>加载...
微信小程序image压缩导致图片失真
小柒的博客
03-21 7935
解决方法 为image设置lazy-load懒加载和mode缩放模式 <image class="banner_img" mode='aspectFill' lazy-load='true' src="{{item.image}}"></image>
微信小程序图片预览模糊解决（taro）
m0_55967670的博客
09-26 1238
解决办法：图片加个质量率，图片链接上面加一参数 x-oss-process=image/quality,q_50。小程序图片预览时，大图片加载太慢，预览时会出现模糊。
微信小程序-图片清晰度修复
nanfang122的博客
07-10 2293
微信小程序+flask搭建的简单小程序，实现了简单的图片上传云端，后端处理图片返回结果的小功能
图片的裁剪和自适应，微信小程序image控件的mode属性
前端之路的博客
12-14 4412
最近在开发小程序的项目中，后台请求过来的是一堆尺寸比较大的图片，如果用image放在尺寸比较的盒子子，就会失真比较严重，图片也会变形，当时由于不知道image有mode属性 真是大费周章，但是效果还是不太好，最后问了其他开发的朋友，才知道有这个属性，今天就分享给大家。 我刚开始的写法是这样的 &amp;amp;amp;lt;image class=&amp;amp;quot;video-picture&amp;amp;quot; src=&amp;amp;q
微信小程序图片显示不全
wangsf789的专栏
11-29 2万+
最近小程序蛮火。     直入主题： 对于一张网络图片高度太高，而显示不全如何解决？     其实我一贯的观点是，所有的问题从api中都能够找到答案，只是有时候缺少耐 心，而没有好好去读官方api,出现问题后着急的google、百度、github... 下面我们来看下api 怎么说的： image 图片。 属性名 类型 默认值 说明 src
微信小程序之图片删除
m0_71347172的博客
03-14 1281
如果想在控制台打印 currentTarget 的值，应该使用 console.log(event.currentTarget)也可以在代码中使用 debugger 语句来暂停代码的执行来观察。Event 接口的只读属性 currentTarget 表示的，标识是当事件沿着 DOM 触发时事件的当前目标。今天在第二大学远程实习中，学习到了图片的删除，之前帖子记录过限制图片上传数量，当图片上传之后如果不理想，用户想要删除又需要如何删除呢？
微信小程序底部tabbar图片
04-29
在本案例中，我们关注的是“微信小程序底部tabbar图片”，这意味着我们将讨论如何设计、配置和使用这些图像来提升用户体验。 首先，微信小程序的底部tabbar图标应当具有清晰的视觉表现力，使用户一眼就能识别出它们...
微信小程序tabbar图标素材
04-18
3. **尺寸规范**：微信小程序规定 TabBar 图标的尺寸为 40px * 40px，SVG 或 PNG 格式，以保证在不同设备上显示清晰无失真。在设计时需确保图标在小尺寸下仍能保持细节。 4. **状态切换**：TabBar 图标通常有两种...
微信小程序 实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册
06-26
微信小程序 实现canvas按照原图等比例不失真绘制海报图并保存海报图片到本地相册
微信小程序图片裁剪demo
02-22
分享一款好用的微信小程序图片裁剪demo,根据手势滑动放大缩小图片，裁剪矩形框中的图片，好东西大家一起分享
微信小程序图片自适应,微信小程序富文本解析。.zip
最新发布
01-11
在标题“微信小程序图片自适应,微信小程序富文本解析”中，主要涉及了两个关键知识点：图片自适应和富文本解析。 首先，我们来详细探讨微信小程序中的图片自适应。在移动应用开发中，图片自适应是一项非常重要的...
微信小程序 image组件遇到的问题
10-16
主要介绍了微信小程序 image组件遇到的问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
微信小程序实现富文本图片宽度自适应的方法
10-17
在微信小程序中，由于屏幕尺寸和布局的差异，图片在不同设备上可能无法自适应显示，导致图片显示不全或比例失真。为了解决这个问题，开发者需要采取一些策略来确保图片在微信小程序中能够自动调整宽度以适应屏幕。...
微信小程序-image加载图片工具中显示，真机中不显示
私信可回答各种问题~
04-24 3615
微信小程序-image加载图片工具中显示，真机中不显示
微信小程序 -- 图片模糊效果
Emily
07-24 7450
在项目中，要求显示二维码图片列表是模糊的，点击时需输入正确密码才可以显示二维码图片。很简单，只需要在其<image>标签添加如下样式： 里面的2px是模糊程度，可按需设置。 image{ filter:blur(2px); } 效果如下： 当然，filter:blur(2px); 样式也适用于html的样式设置。 ...
微信小程序-图片宽100%显示，不变形
热门推荐
秦秋雨的专栏
06-19 2万+
按照HTML习惯进行写，代码：<view class="meiti"> <image src="http://10.0.0.171:9001/images/2017/0619/20170619115150713_progressive.jpg" style="width:100%;"></image> </view> 效果如下： 很明显变形了然后查找资料 找到一篇关于微信小程
微信小程序image图片自适应宽度比例显示的方法
aiqiurong6742的博客
01-19 3124
我们都知道微信小程序的组件image是用来显示图片的，它有一下几个属性：1、src 图片资源地址2、mode 图片裁剪、缩放的模式3、binderror 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’}4、bindload 当图片载...
微信小程序商品详情页
08-09
您好！关于微信小程序的商品详情页，我可以为您提供一些基本信息。 商品详情页是微信小程序中展示商品详细信息的页面。它通常包含商品的图片、标题、价格、描述等内容，以及购买按钮或加入购物车按钮等交互元素。 在设计商品详情页时，可以考虑以下几个方面： 1. 商品信息：展示商品的图片、标题、价格、销量等基本信息，以吸引用户注意并提供购买的基础信息。 2. 商品描述：提供商品的详细描述，包括规格、材料、功能特性等。可以使用图文混排的方式，让用户更清晰地了解商品的特点。 3. 商品评价：展示其他用户对该商品的评价和评分，以增加用户对商品的信任度和购买意愿。 4. 商品推荐：可以根据用户的浏览历史或购买记录，推荐相关的商品或搭配商品，提高用户的购买转化率。 5. 购买操作：提供购买按钮或加入购物车按钮，让用户方便进行购买操作。可以考虑使用一键下单、快捷支付等功能，简化用户购买流程。 6. 页面布局和交互设计：合理布局页面元素，保证页面的整体美观和易用性。可以考虑使用轮播图、选项卡等交互元素，提升用户的浏览体验。 以上是一些关于微信小程序商品详情页的基本信息和设计建议，希望对您有所帮助！如果您有其他问题，请随时提出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值