HarmonyOS 鸿蒙Next 图片组件加载本地图片时alt属性异常

文档中图片组件说明如下，如果图片的地址是本地file协议地址，则一直展示的是alt的图，不会更新为本地的图

使用网络图片时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考声明权限。



@Entry
@Component
struct ImageExample2 {
  build() {
    Column({ space: 10 }) {
      Image("https://www.example.com/xxx.png")// 直接加载网络地址，请填写一个具体的网络图片地址
        .alt($r('app.media.icon'))// 使用alt，在网络图片加载成功前使用占位图
        .width(100)
        .height(100)
    }
  }
}

更多关于HarmonyOS 鸿蒙Next 图片组件加载本地图片时alt属性异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 1楼•5 个月前作者

import { fileUri } from '[@kit](/user/kit).CoreFileKit';

import { common } from '[@kit](/user/kit).AbilityKit';

[@Entry](/user/Entry)

[@Component](/user/Component)

struct Page{

[@State](/user/State) uri: string = ''

aboutToAppear(): void {

let context = getContext(this) as common.UIAbilityContext

let path = context.filesDir + '/xx.png';

this.uri = fileUri.getUriFromPath(path)

}

build() {

Row() {

Column({ space: 10 }) {

Text(this.uri)

Image(this.uri)

.alt($r('app.media.xxx'))// 使用alt，在网络图片加载成功前使用占位图

.width(100)

.height(100)

}.width('100%')

}.height('100%')

}

更多关于HarmonyOS 鸿蒙Next 图片组件加载本地图片时alt属性异常的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 2楼•5 个月前

针对HarmonyOS 鸿蒙Next 图片组件加载本地图片时alt属性异常的问题，以下是一些可能的原因及解决方案：

首先，alt属性通常用于描述网络图片的替代文本，以便于在图片无法加载时显示相关信息，或提高网页的可访问性。然而，在HarmonyOS的Image组件中，alt属性可能并不直接支持或表现方式与Web标准有所不同。

检查Image组件属性：确认HarmonyOS Image组件是否支持alt属性，或者是否有其他属性可以达到类似的效果。
图片路径和格式：确保本地图片的路径正确无误，并且图片格式被系统支持（如PNG、JPG等）。
资源访问权限：检查应用是否有足够的权限去访问指定的图片路径。
组件版本与文档：查阅最新的HarmonyOS开发文档，确认Image组件的使用方法和支持的属性。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。