关于.webp 格式图片在 ios 设备上无法正常显示的问题

最新推荐文章于 2024-08-12 09:02:51 发布

Mingyun-zjk

最新推荐文章于 2024-08-12 09:02:51 发布

阅读量827

点赞数

CC 4.0 BY-SA版权

文章标签：前端 uni-app

本文链接：https://blog.youkuaiyun.com/Strive_Limingyun/article/details/129427236

文章讲述了如何利用JavaScript的字符串replace()方法，结合正则表达式，将接口返回数据中所有.webp格式的图片链接替换为.jpg格式，以适应不支持.webp格式的环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用正则表达式，将接口数据里面的.webp格式的图片，替换为.jpg图片

// 使用字符串的 replace() 方法，将 webp 的后缀名替换为 jpg 的后缀名
  res.message.goods_introduce = 
  res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ')
  .replace(/webp/g, 'jpg')

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mingyun-zjk

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue项目下一些浏览器不支持图片的.webp格式的处理

斗师——Ace

03-07

5705

添加小程序，兑换各种视频教程/数据资源。 1. 什么是webp格式：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。WebP既支持有损压缩也支持无损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。与JPEG相同，WebP是一种有损压缩。但谷歌表示，这种格式的...

SDWebImage资源合集，解决webp格式问题

02-09

这个资源合集专门针对SDWebImage在处理webp格式图像时可能遇到的问题，webp是一种由Google开发的高效图片格式，具有更好的压缩效率和更快的加载速度。在iOS开发中，SDWebImage通常通过URL加载网络图像，并将其自动...

参与评论您还未登录，请先登录后发表或查看评论

ios webp图片加载

06-28

webp网络图片加载/本地图片加载 webp格式gif处理

解决 .webp 格式图片在 ios 设备上无法正常显示的问题

厚积薄发.

10-25

2229

使用字符串的 replace() 方法，将 webp 的后缀名替换为 jpg 的后缀名

iOS性能之WebP

weixin_30535043的博客

03-20

183

当今互联网，无论网页还是APP，流量占用最大的，多数都是因为图片，越是良好的用户体验，对图片的依赖度越高。但是图片是一把双刃剑，带来了用户体验，吸引了用户注意，却影响了性能，因为网络请求时间会相对比较长。图片分很多种，比较主流的就是：位图（BMP），jpg（JPEG，有损压缩格式），png（无损压缩格式）等，这三种，按照图片大小和清晰度来看，依次是：BMP > png > jpg。...

WebP-iOS-example: 使用WebP图像格式在iOS应用中实现高效图片加载

gitblog_00040的博客

03-15

632

WebP-iOS-example: 使用WebP图像格式在iOS应用中实现高效图片加载随着移动设备的普及，开发者们需要在保证用户体验的同时优化应用程序的性能。其中，图片加载速度是影响用户体验的重要因素之一。本文将为您介绍一个名为WebP-iOS-example的开源项目，它可以帮助您在iOS应用中轻松地使用WebP图像格式，从而提高图片加载速度和节省流量。什么是WebP？ WebP是一种由...

iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片

热门推荐

jia12216的专栏

09-20

2万+

iOS是不支持WebP格式图片解决方案：在阿里云的图片下载规则里配置为把WebP格式图片转换成png或 jpeg格式的图片。今天我们遇到我们的苹果app和苹果上的微信端在加载有个用户的商品时，商品图片显示不出来，安卓app上可以显示。后来定位，那个用户传递的图片文件名后缀虽然是jpeg，但时其实是WebP格式的图片，safari也显示不了对应页面的图片，iOS不支持该格式的图片。我们首先想到的...

WebpiOS:iOS加载webp后缀的图片（利用google开源c代码）

03-23

iOS加载webp后缀的图片（利用google开源c代码） #usegae 1，cocoapod管理 pod'WebpiOS' 2，手动导入把webp文件下的文件导入到工程，同时工程依赖SDWebImage第三方框架导入头文件#import“ UIImage + WebP.h” ...

iOS WebView中使用webp格式图片的方法

01-05

webp格式图片是google推出的，相比jpg png有着巨大的优势，同样质量的图片webp格式的图片占用空间更小，在像电商这样图片比较多的App中，使用webp格式图片会很有优势。引言很早之前，我们的项目中就已经采用了webp...

关于ios项目中加入webp格式的图片

weixin_30670925的博客

11-24

760

webp格式图片在iOS中的使用主要讨论iOS客户端如何支持webp格式的图片链接显示。webp的相关知识点可百度。使用框架：YYWebImage YYWebImage 是一个异步图片加载框架其设计目的是试图替代 SDWebImage、PINRemoteImage、FLAnimatedImage 等开源框架，它支持这些开源框架的大部分功能，同时增加了大量新特性、并且有不小的性能提升...

iOS 加载WebP图片、WebP动图

u013712343的博客

11-17

5346

1、为什么要用WebP格式图片？因为WebP格式图片是Google新推出的影像技术，对比png、jpg而言，文件大小减少了20多%，利用压缩手段，可以使文件大小减少至80%，并且肉眼所看，和原图没什么区别，失真率极低。目前互联网上传输的数据有65%都是图片，WebP就是出于减少数据量、加速网络传输的目的而开发的。 2、如何加载WebP图片网上很多文章都说通过pod 'SDWebImage/WebP'来进行安装，我pod不下来，换了路径还不行，后来换个途径，pod 'SDWebImageWebPC.

iOS兼容WebP格式图片

u013712343的博客

11-17

2178

关于webp格式图片：由Google发展出来，正常来说，在Android上是不需要做任何适配处理的。但是在iOS需要加入图片的适配，否则显示不了。关于webp图片详细介绍可以百度。适配依赖库及其版本： 1、SDWebImage (5.0.1) 2、SDWebImageWebPCoder (0.2.0) 3、libwebp (1.0.2) Podfile这样写： #图片下载及管理 pod 'SDWebImage', '~> 5.0.1' #兼容webp格式图片，会自动关联下载li

iOS-WebP 项目使用教程

gitblog_00845的博客

08-10

504

iOS-WebP 项目使用教程项目介绍 iOS-WebP 是一个开源项目，旨在为 iOS 开发者提供 WebP 图像格式的支持。WebP 是一种由 Google 开发的图像格式，它提供了有损和无损压缩，以及透明度支持，相比传统的 JPEG 和 PNG 格式，WebP 可以显著减小图像文件的大小，同时保持图像质量。项目快速启动安装首先，你需要将 iOS-WebP 项目克隆到你的本地开发环境中...

uniapp开发，解决 .webp 格式图片在 ios 设备上无法正常显示的问题

孙少的博客

05-02

3138

1、解决 .webp 格式图片在 ios 设备上无法正常显示的问题如图所示

推荐项目：iOS-WebP —— 打造高效图像体验的利器

gitblog_00445的博客

08-12

446

iphone无法识别.webp格式图片，前端解决办法和 rich-text（富文本）

qq_46302247的博客

03-02

1624

后端返回的接口数据： iphone无法识别.webp格式图片，解决办法 goods_introduce.replace(/\.webp/g, '.jpg') 富文本 <rich-text nodes="{{goods_introduce}}"></rich-text>

iOS 全面支持 webp格式图片

hxpp777的博客

09-11

1万+

iOS 全面支持 webp格式图片 Custom URLProtocol webp格式图片 webp格式图片是google推出的，相比jpg png有着巨大的优势，同样质量的图片webp格式的图片占用空间更小，在像电商这样图片比较多的App中，使用webp格式图片会很有优势。 webp在iOS设备上当前的iOS不支持webp，不知道以后会不会支持，所以从网络上拿到一个we

[iOS]系统升级后应用无法展示WebP格式图片问题

Gamin

01-06

7252

[iOS]系统升级后应用无法展示WebP格式图片问题资源： https://github.com/rs/SDWebImage https://github.com/ibireme/YYImage https://github.com/ibireme/YYWebImage http://blog.csdn.net/zhonggaorong/article/deta

iOS webp支持

LBJ

01-28

1000

https://github.com/ibireme/YYImage

uniapp的image标签在ios无法显示webp类型的图片

最新发布

03-19

### uni-app 中 Image 标签在 iOS 下 WebP 图片不显示的解决方案在开发过程中，如果遇到 **uni-app** 的 `image` 组件在 iOS 平台上无法正常加载 WebP 格式的图片问题，可以采用以下方法来解决： #### 1. 使用 `<picture>` 元素实现兼容性处理通过 HTML5 提供的 `<picture>` 标签，可以在不同环境下动态选择合适的图片格式。此方式能够有效应对浏览器或平台对特定图像格式的支持差异。 ```html <picture> <source srcset="example.webp" type="image/webp"> <img src="example.jpg" alt="替代图片"> </picture> ``` 上述代码片段展示了如何利用 `<source>` 和 `<img>` 来设置优先级较高的 WebP 文件作为首选资源，而当目标环境不支持该格式时，则会自动回退到传统的 JPEG 或 PNG 文件[^1]。 #### 2. 动态检测设备类型并调整路径对于跨平台框架如 Uni-app 而言，可以通过 JavaScript 判断当前运行的操作系统版本以及其对应的特性支持情况，从而决定最终渲染哪一种类型的文件链接地址给前端展示出来。以下是具体的实现逻辑示例： ```javascript export default { data() { return { imgSrc: '' }; }, mounted() { const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; this.imgSrc = isIOS ? 'fallback-image.jpg' : 'original-webp-image.webp'; } }; ``` 在此基础上还可以进一步优化用户体验，比如加入懒加载机制减少初始页面体积；或者引入CDN加速服务提高访问速度等等措施提升整体性能表现。 #### 3. 配置 Nginx 实现服务器端重定向除了客户端层面的努力之外，也可以考虑从后端入手解决问题——即让服务器根据请求头中的 User-Agent 字段判断来访者的具体型号，并据此返回相应的静态资源内容。下面是一个简单的 NGINX 配置案例用于演示这一过程: ```nginx map $http_user_agent $webp_suffix { default ""; "~*(iPhone|iPad)" ".jpg"; } location ~* \.(?:jpe?g|png)$ { add_header Vary Accept-Encoding; try_files $uri$webp_suffix $uri =404; } ``` 这段配置的意思是说：如果是来自 iPhone/iPad 设备发出的 HTTP 请求，则尝试寻找同名但是扩展名为 .jpg 的文件代替原始请求的目标对象(webp); 如果找不到匹配项则按照常规流程继续查找其他可能存在的副本直至失败为止. 以上三种策略都可以帮助开发者克服由于缺乏广泛采纳而导致的技术障碍, 同时也体现了现代软件工程实践中提倡的渐进增强原则(progressive enhancement)，确保即使是在较为陈旧的基础架构之上也能提供基本可用的功能体验.