页面上的图片无法显示或显示默认的图片样式
====================

#### 问题现象

用户在浏览新闻、查看商品等需要查看图片的场景，图片加载失败，显示裂图或者空白。

#### 背景知识

*   [Image](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image)：Image为图片组件，常用于在应用中显示图片。Image支持加载PixelMap、ResourceStr和DrawableDescriptor类型的数据源，支持png、jpg、jpeg、bmp、svg、webp、gif和heif类型的图片格式。
*   网络：网络日志关键字rssi、snr、chload和noise：
    *   rssi：信号强度，通常以分贝毫瓦（dBm）为单位来衡量。一般而言，-30dBm到-50dBm之间的信号强度被认为是良好的，-50dBm到-70dBm之间的信号强度可以接受，而低于-70dBm的信号强度则较差。
    *   snr：信噪比是信号强度与背景噪声强度的比值，通常以分贝（dB）为单位。snr值越高，表示信号越纯净，噪声干扰越小。一般而言，snr值在30dB以上被认为是优秀的，20dB到30dB之间可以接受，低于20dB则信号质量较差。
    *   chload：通道占用比，可用于表征WiFi信道的繁忙度。chload越高代表网络状态越差，chload 500以上网会卡顿，800以上不可上网。
    *   noise：-80为干扰环境，-60以上为强干扰。
*   [mixedMode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-attributes#mixedmode)：设定当安全源尝试从非安全源加载资源时的行为。当属性没有显式调用时，默认值为MixedMode.None，即禁止安全源从非安全源加载内容。

#### 修改建议

| 
场景

 | 

判断条件

 | 

判断结果

 | 

结论

 | 

建议

 |
| :-- | :-- | :-- | :-- | :-- |
| 

图片有时可以加载，有时无法加载

 | 

查看日志，搜索关键字chload等网络关键字

 | 

根据网络知识判断chload等网络值较差

 | 

用户所处网络环境差。

 | 

切换网络。

 |
| 

图片链接异常

 | 

查看日志，搜索图片链接，并在浏览器打开

 | 

无法正常打开

 | 

源资源文件异常，可能为源文件损坏或服务器宕机等原因导致。

 | 

排查更新损坏的源资源/修复服务器宕机导致的源资源访问失败。

 |
| 

图片链接异常

 | 

查看日志，搜索图片链接，并在浏览器打开

 | 

可打开，但链接为http，显示不安全

 | 

应用未设置mixedMode，或fileAccess等未设置导致Web访问文件失败，参考背景知识Web中的配置排查。

 | 

设置mixedMode，以使用http链接图片。示例代码参考[mixedMode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-basic-components-web-attributes#mixedmode)。

 |
| 

图片链接异常

 | 

查看日志，搜索图片链接，并在浏览器打开

 | 

可打开，但链接没有携带图片的格式后缀名

 | 

链接未匹配Image支持的图片格式会导致图片加载失败。

 | 

参考背景知识[Image](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image)中图片格式，配置正确的图片链接格式。

 |
| 

代码逻辑与权限

 | 

查看module.json文件中ohos.permission.INTERNET权限声明

 | 

无权限声明

 | 

使用网络图片但未申请ohos.permission.INTERNET权限。

 | 

参考链接[声明权限](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/declare-permissions)申请ohos.permission.INTERNET权限，以使用网络图片。

 |
| 

代码逻辑与权限

 | 

查看package.json文件中dependencies的ImageKnife版本

 | 

版本低于3.2.3

 | 

ImageKnife版本低于3.2.3，无法加载大图。

 | 

修改依赖ImageKnife三方库版本至3.2.3。修改完成后，再次执行ohpm i @ohos/imageknife更新ImageKnife三方库版本即可。

 |
| 

代码逻辑与权限

 | 

在Hilog日志中，根据[Image错误码](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/errorcode-image)搜索如62980100等常见错误码

 | 

有如62980100等错误码

 | 

图片解码错误（根据对应错误码得出分析结论）。

 | 

根据对应错误码排查修改错误。

 |