webp 格式图片显示异常分析及解决方案

目录
  • webp 格式的图片显示异常
    • webp介绍
    • webp转换
    • webp兼容性
    • 兼容解决方案
  • 附录：解决 .webp 格式图片在 ios 设备上无法正常显示的问题

webp 格式的图片显示异常

webp介绍

WebP，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，能节省大量的服务器带宽资源和数据空间。

webp转换

  • 右键点击图片，点击【在新标签页中打开图片】。
  • 若是看到地址栏的后缀是webp，把webp改为jpg/png，回车。然后再点击图片，选择【另存为】，图片存储为jpg/png。
  • 若看到地址栏的后缀不是webp，点击图片，选择【另存为】，图片存储为wenp格式的。然后再次打开存在本地webp格式图片，看到地址栏的后缀是webp，按照步骤二继续操作。

踩坑：直接修改图片的后缀名不可取，没有改变原图片的属性，其实还是webp的格式。也可以通过转换工具或者命令行进行转换。

webp兼容性

目前网页浏览器当中，Google Chrome和Opera原生支持静态与动态的WebP格式。Firefox浏览器亦在65.0版本支持WebP图像。
苹果在macOS Sierra及iOS 10的早期beta版本中加入了WebP支持。而在2016年9月7日发布的iOS 10 和 macOS Sierra GM种子版本中却移除了WebP的支持。

总结，webp 在 ios5/6 的 chrome、safari 浏览器不支持，在 Android 常用的浏览器都支持。

兼容解决方案

前端js的方案还未实践，想实践的可参考原文[3]。
简单方案，把webp格式转为png，在项目中使用，保正图片在各设备正常显示。

参考原文链接：

[1] https://developers.google.com/speed/webp
[2] https://zh.wikipedia.org/wiki/WebP
[3] https://segmentfault.com/a/1190000004948757

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

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

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

// 定义请求商品详情数据的方法
async getGoodsDetail(goods_id) {
  const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })
  if (res.meta.status !== 200) return uni.$showMsg()

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

到此这篇关于webp 格式的图片显示异常的文章就介绍到这了,更多相关webp 格式图片内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • python webp图片格式转化的方法

    本文实例为大家分享了python webp图片格式转化的具体代码,供大家参考,具体内容如下 1.将本地的webp图片转换为jpg 2.将下载的webp格式图片直接保存为jpg 代码如下: 1.将本地的webp图片转换为jpg from PIL import Image filename = 'xxxxxxxxxx.webp' im = Image.open(filename) if im.mode == "RGBA": im.load() # required for png.spli

  • Python将图片批量从png格式转换至WebP格式

    Python将图片批量从png格式转换至WebP格式

    实现效果 将位于/img目录下的1000张.png图片,转换成.webp格式,并存放于img_webp文件夹内. 源图片目录 目标图片目录 关于批量生成1000张图片,可以参考这篇文章:利用Python批量生成任意尺寸的图片 实现示例 import glob import os import threading from PIL import Image def create_image(infile, index): os.path.splitext(infile) im = Image.op

  • 让网站Windows服务器之iis支持Webp图片格式的方法(宝塔)

    目录 一.Webp报错 二.造成Webp报错的原因 三.解决网站Webp文件打开404 我们可能因为一些特殊需求网站服务器使用 Windows Server 系统来跑,没有采用Linux环境.而Webp格式的图像越来越多的网站采用,因为压缩效率更为出色,在同等质量下体积要比JPEG格式的小很多.这时你可能会发现上传到网站的Webp图像文件浏览器无法打开,报404错误,今天我们简单几个步骤轻松解决这个问题. 一.Webp报错 当你的 Windows Server 服务器使用的是 IIS 信息服务管

  • js+canvas实现图片格式webp/png/jpeg在线转换

    功能需求: 我们在网页中上传一张图片,选择不同的格式,将该图片转换为对应的格式. 实现思路: 实现这样的功能,使用后端语言[php,java等]可以很容易的完成.但是如果只在前端如何完成呢? 1.通过input上传图片,使用FileReader将文件读取到内存中. 2.将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,如:"image/webp","image/jpeg","image/png". 3.最后将

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

    webp格式图片 webp格式图片是google推出的,相比jpg png有着巨大的优势,同样质量的图片webp格式的图片占用空间更小,在像电商这样图片比较多的App中,使用webp格式图片会很有优势. 引言 很早之前,我们的项目中就已经采用了webp格式,但是由于webView本身并不能解析webp格式,所以我们基于webView的文章详情页就无法使用到这项优化. 那么有没有什么办法能实现呢?当然是有的. 在开始技术讲解之前需要先说明,本文的技术方案,是基于本项目的情况:文章的正文大部分通过接

  • Java处理Webp图片格式转换的示例代码

    前言 Webp是Google推出的一种新型图片格式,相比于 传统的PNG/JPG图片有着更小体积的优势,在Web中有着广泛的应用.由于Webp格式推出比较晚, Jdk 内置的图片编解码库对此并不支持. 网上给出的Java环境解决方案往往需要手动在java.library.path中安装对应的动态链接库,windows是dll文件,linux是so文件.这对于开发部署非常不方便. 本文提供一种无需手动安装动态链接库,同时可以方便处理Webp的解决方案 WebP是谷歌的图片格式,java 类库ima

  • 让IIS支持webp格式的图片

    WebP(发音:weppy)是一种同时提供了有损压缩与无损压缩(可逆压缩)的图片文件格式,派生自影像编码格式VP8,被认为是WebM多媒体格式的姊妹项目,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布. WebP支持的像素最大数量是16383x16383.有损压缩的WebP仅支持8-bit的YUV 4:2:0格式.而无损压缩(可逆压缩)的WebP支持VP8L编码与8-bit之ARGB色彩空间.又无论是有损或无损压缩皆支持Alpha透明通道.ICC色彩配置.

  • webp 格式图片显示异常分析及解决方案

    目录 webp 格式的图片显示异常 webp介绍 webp转换 webp兼容性 兼容解决方案 附录:解决 .webp 格式图片在 ios 设备上无法正常显示的问题 webp 格式的图片显示异常 webp介绍 WebP,谷歌(google)开发的一种旨在加快图片加载速度的图片格式.提供了有损压缩与无损压缩(可逆压缩)的图片文件格式,能节省大量的服务器带宽资源和数据空间. webp转换 右键点击图片,点击[在新标签页中打开图片]. 若是看到地址栏的后缀是webp,把webp改为jpg/png,回车.

  • PHP处理bmp格式图片的方法分析

    本文分析了PHP处理bmp格式图片的方法.分享给大家供大家参考,具体如下: 白天QA提出项目上传图片有问题,具体为:上传成功,预览失败.我去了之后,又上传了几张其他的图片可以上传,然后仔细问了下他上传的是哪张图片,看了后使用getimagesize函数打印了下. Array ( [0] => 494 [1] => 260 [2] => 6 [3] => width="494" height="260" [bits] => 24 [mim

  • 关于PyQt5中QtGui.QImage图片显示问题解析

    关于PyQt5中QtGui.QImage图片显示问题解析

    前言 PyQt是Python语言环境的GUI编程解决方案之一,另外还有PyGTK.wxPython等也较为常用.PyQt作为Qt语言的Python扩展,可以用来方便快速的开发界面应用. PyQt5中的QtGui.QImage图片显示 import os.path as osp import cv2 from qtpy import QtCore from qtpy import QtWidgets from qtpy import QtGui # TracelessLe注:代码示例,不可直接执行

  • Android中ListView异步加载图片错位、重复、闪烁问题分析及解决方案

    Android ListView异步加载图片错位.重复.闪烁分析以及解决方案,具体问题分析以及解决方案请看下文. 我们在使用ListView异步加载图片的时候,在快速滑动或者网络不好的情况下,会出现图片错位.重复.闪烁等问题,其实这些问题总结起来就是一个问题,我们需要对这些问题进行ListView的优化. 比如ListView上有100个Item,一屏只显示10个Item,我们知道getView()中convertView是用来复用View对象的,因为一个Item的对应一个View对象,而Ima

  • Linux下搭建简易的HTTP服务器完成图片显示

    Linux下搭建简易的HTTP服务器完成图片显示

    目录 1. 前言 2. HTTP协议介绍 3. HTTP的消息结构 4. HTTP交互流程 5. 案例代码: 搭建HTTP服务器 6. 最终运行的效果 1. 前言 作为Linux下socket(TCP)网络编程的练习,使用C语言代码搭建一个简单的HTTP服务器,完成与浏览器之间的交互,最终在浏览器上显示一张图片. 2. HTTP协议介绍 HTTP协议本身是基于TCP通信协议来传递数据(HTML 文件, 图片文件-也叫超文本传输协议),HTTP协议必须工作在客户端-服务端架构上(本身底层就是TCP

  • Android实现从网络获取图片显示并保存到SD卡的方法

    本文实例讲述了Android实现从网络获取图片显示并保存到SD卡的方法.分享给大家供大家参考,具体如下: 问题: 如何不断获取图片并显示出来,达到视频的效果? 代码: public class GetPictureFromInternetActivity extends Activity { private ImageView imageView; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst

  • Android Studio 4.0新特性及升级异常问题的解决方案

    一.升级问题 1. dataBinding开启配置修改 升级到AS 4.0以后,出现如下的预警,对于我这种有代码洁癖的人是不能忍的,必须解决 DSL element 'android.dataBinding.enabled' is obsolete and has been replaced with 'android.buildFeatures.dataBinding' 解决方法: dataBinding { enabled = true } 这是原有的DataBinding开启方式,在升级后

  • Python利用Matplotlib绘图无法显示中文字体的解决方案

    Python利用Matplotlib绘图无法显示中文字体的解决方案

    目录 发现问题 解决方式: 总结 发现问题 我在利用Pycharm中的matplotlib库进行绘图的时候,出现了一个问题,当我将所绘的图的横,纵坐标,希望加上一个中文描述的时候,比如,'横坐标','纵坐标'类似这样的描述方法.出现了很多人都会出现的一个问题. import matplotlib.pyplot as plt squares = [1, 4, 9, 16, 25] fig, ax = plt.subplots() ax.plot(squares, linewidth=3) #设置图

随机推荐