【白话科普】网站图片不显示，背后的原因你都清楚吗-低调大师

【白话科普】网站图片不显示，背后的原因你都清楚吗

2021-04-29 692

浏览网页的时候，什么才是最重要的？是充满信息的文字么？没想到吧，是我图片哒！在这个快节奏的时代里，图片才是碎片化时间中最容易传递信息的存在。因此在网页中，图片是不可或缺的存在。然而经常有朋友反应，打开网页的时候不显示图片，这是为什么呢？是什么原因导致了图片无法加载呢？

图片不显示的常见原因

网速问题

如果打开网页的时候无法打开图片，首先应该检查的就是网速问题，如果网速太慢或某张图片提及过大，就会出现图片加载失败的情况。

检查方法：网速过慢自己可有直接感觉，如打开百度、新浪之类的网站都比较慢，可以的话，可以直接百度搜“网速测试”进行直接在线测试自己的网速。

Flash Player 问题

有的时候打开网站后，图片会显示需要 Flash Player，遇到这种提示后，我们可以点击控制面板，双击 Flash Player 选项，电脑桌面显示出了 Flash Player 设置管理器，然后选择高级，点击立即测试。我们点击浏览器右上角的工具。选择管理加载项，启用 shockwave flash object，然后点击确定。

Internet 选项设置不当

当浏览器过滤了图片，或者将我们所访问的网站添加到受限站点，也可能导致图片无法显示。我们可以点击浏览器工具，点击 Internet 选项，针对第一种情况，我们选择高级选择，点击显示图片，最后选择应用，在重新访问网站就可以了。如果是后一种情况，我们可以选择安全选项，点击受限站点，删除受限站点的列表中我们所访问的网站，最后选择下应用就好了。

除去重新刷新访问外，我们也可以用浏览器自带的抓包工具来看下访问效果，可以在页面按 F12 或者在页面上右键点“检查”，就可以看到开发者工具的内容。

之后打开 Network 面板，该面板记录页面上每个网络操作的相关信息，包括详细的耗时数据、HTTP 请求与响应标头和 Cookie。

点击资源名称，可以查看与资源有关的更多信息。

可用标签会因您所选择资源类型的不同而不同，但下面四个标签最常见：

Headers：与资源关联的 HTTP 标头。Headers 标签可以显示资源的请求地址、HTTP 方法以及响应状态代码。此外，该标签还会列出 HTTP 响应和请求标头、它们的指以及任何查询字符串参数。
Preview : JSON、图像和文本资源的预览。 Preview 标签会显示该资源的预览信息，也可能不显示，具体取决于您所选择资源的类型。
Respones : 显示资源未格式化的 HTTP 响应内容（如果存在）。
Timing : 资源请求生命周期的精细分解。

可以在控制台看下图片响应的状态以及响应的时间来判断不显示的原因，以便于更快的解决问题。

当然也有一些比较特殊的原因，比如现在非常流行的 WebP 格式的图片，由于不是所有浏览器支持，有时候也会出现图片不显示的情况，下面我们来细看下。

浏览器不支持WebP

为了减少互联网上图片的发送时间和流量消耗，现在很多网站都选择了 WebP 格式的图片。WebP 集合了多种图片文件格式的特点。它像 JEPG 一样适合压缩照片和其他细节丰富的图片，像 GIF 一样可以显示动态图片，像 PNG 一样支持透明图像。同时 WebP 在性能上也比其他格式的图片更强劲，根据 Google 的测试，WebP 无损压缩图片比 PNG 图片少了45%的文件体积。

使用 WebP 确实能给实际应用带来很多好处，但是因为并非所有浏览器都支持 WebP ，比如：IE、Firefox 某些版本等。所以当浏览器不支持时，就会出现图片无法显示的问题。

面对这种情况，有办法让支持 WebP 格式的浏览器看 WebP 图片，不支持 WebP 格式的显示图片原格式吗？

这里就要介绍下又拍云的 WebP 自适应功能。

WebP 自适应功能会判断客户端浏览器是否支持 WebP 解码，如支持则返回 WebP 格式图片，否则返回原图，客户端以及源站无需任何改动。WebP 自适应开启方式也非常简单。只需要在又拍云后台点击开启键即可。

在 Kotlin 序列化中使用 DataStore

我们之前已经分享了 Proto DataStore 和 Preferences DataStore 的使用方法。这两个 DataStore 版本都会在后台使用 Protos 对数据进行序列化。您也可以使用 Kotlin 序列化，结合使用 DataStore 与自定义数据类。这有助于减少样板代码，且无需学习或依赖于 Protobuf 库，同时仍可以为数据提供架构。您需要完成以下几项操作: 定义数据类确保您的数据类不可变使用 Kotlin 序列化实现 DataStore 序列化器开始使用定义数据类 Kotlin 数据类非常适合与 DataStore 结合使用，这是因为它们能够与 Kotlin 序列化无缝协作。DataStore 会依赖数据类自动生成的 equals 和 hashCode。数据类也会生成便于调试和更新数据的 toString 和 copy 函数。 /* Copyright 2021 Google LLC. SPDX-License-Identifier: Apache-2.0 */ data class UserPreferences( val showCom...

2021-04-29

519

导读：WebRTC 是一个非常优秀的项目，可以支持 Web、iOS、Android、Mac、Windows、Linux 在内的所有平台的 API，保证了 API 在所有平台的一致性。然而 WebRTC 在移动端的表现跟 PC 相比，显得不是那么令人满意，尤其是在 Android 系统上，Android 系统的自身碎片化已经被诟病已久。每一次的 Android 系统升级，每个芯片厂商、手机厂商都会基于 Android 系统做一些定制化，造成了即使是同样的 Android 系统版本，同样的 Android 标准 API 调用，不同设备表现不一样。所以如果不针对不同机型做适配，很难达到统一的用户体验，功能的稳定性也很难保证。 RTC 场景中要想在 Android 设备上实现高可靠、稳定、低延时、设备通用，音视频兼容性适配必不可少。Android 设备相关参数精细化配置、智能化配置，就是本文考虑的重心。如何精细化配置主流 SOC (System On Chip)方案都是基于 Linux/Android 系统开发，但是各家却各有所长。高通 SOC 主要应用在手机设备上，编解码性能和稳定性...

2021-04-29

440

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。