HarmonyOS 鸿蒙Next 这里怎么放置不同的图片

class ItemBean { img: string = “” desc: string = “” }

@Entry @Component struct GridItemExample { @State arr: Array<ItemBean> = [{ img: ‘https://img0.baidu.com/it/u=4105778329,1297102594&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500’, desc: ‘头像1’ }, { img: ‘https://pics6.baidu.com/feed/54fbb2fb43166d22f208e1e951dbaafa9152d252.jpeg@f_auto?token=9b4a89a9409788a138820b25d9f45a69’, desc: ‘头像2’ }, { img: ‘https://q4.itc.cn/q_70/images03/20240308/003c3bb12ac147e9bed04ced932e49c3.jpeg’, desc: ‘头像3’ }, { img: ‘https://pics7.baidu.com/feed/8601a18b87d6277f0f39ce410d28883de924fcba.jpeg@f_auto?token=883ff047cc09e24a3910636b108fbc70’, desc: ‘头像4’ }]

build() { Column() { Grid() { ForEach(this.arr, (item: ItemBean, index: number) => { GridItem() { Stack() { Image(item.img).width(‘100%’).height(‘100%’) Text(item.desc + “,位置：” + index) .fontSize(16) .backgroundColor(0xF9CF93) .textAlign(TextAlign.Center) }.width(‘350lpx’).height(‘350lpx’).alignContent(Alignment.TopStart) }.width(‘350lpx’).height(‘350lpx’) }, item => item) } .columnsTemplate(‘1fr 1fr’) .rowsTemplate(‘1fr 1fr’) .width(‘90%’).height(‘700lpx’) }.width(‘100%’).margin({ top: 5 }) } }

更多关于HarmonyOS 鸿蒙Next 这里怎么放置不同的图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 2楼•4 天前

为什么用media里的图片显示不了？

ionicwang 3楼•4 天前

只能用网络图片吗

htzhanglong 4楼•4 天前

得用$r访问，类型改成资源类型，

yuanlaile 5楼•4 天前

在HarmonyOS鸿蒙Next中，放置不同的图片可以通过使用Image组件实现。Image组件支持从本地资源、网络或Base64数据加载图片。你可以通过设置src属性来指定图片源。

例如，使用本地资源图片：

<Image
    src="$media:my_image"
    width="100vp"
    height="100vp"/>

使用网络图片：

<Image
    src="https://example.com/my_image.png"
    width="100vp"
    height="100vp"/>

使用Base64数据：

<Image
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." 
    width="100vp"
    height="100vp"/>

你可以在布局文件中使用多个Image组件来放置不同的图片，并根据需要调整其位置和大小。通过position属性可以控制图片的布局方式，如absolute或fixed。

phonegap100 6楼•4 天前

在HarmonyOS（鸿蒙Next）中，放置不同图片可以通过以下步骤实现：

准备资源文件：将图片文件放入 resources/base/media 目录下，支持 png、jpg 等格式。
引用图片资源：在布局文件（如 XML）中使用 Image 组件，并通过 ohos:src="$media:your_image_name" 引用图片。
动态设置图片：在代码中通过 Image.setImageResource() 方法动态设置图片资源。
适配不同分辨率：可创建不同分辨率的图片资源文件夹（如 media/ldpi、media/hdpi），系统会自动适配。

通过这些步骤，您可以在鸿蒙应用中灵活放置和管理不同图片。