Bildkomponente von ArkUI des HarmonyOS-Projekts

Bildkomponente von ArkUI des HarmonyOS-Projekts

1. Betriebsumgebung

Betriebssystem: Windows 10 Professional, IDE: DevEco Studio 3.1, SDK: HarmonyOS 3.1

2. Bildkomponente

Image Eine grundlegende Komponente zum Laden und Anzeigen von Bildern. Sie unterstützt das Laden von Bildern aus dem Speicher, lokal und aus dem Netzwerk. Wenn Sie Bilder aus dem Netzwerk laden, müssen Sie Netzwerkzugriffsberechtigungen beantragen. ohos.permission.INTERNET

Schnittstelle

Bild(src: string | PixelMap | Ressource)

Parameter

Parametername	Parametertyp	Erforderlich	Standardwert	Parameterbeschreibung
src	string| PixelMap | Ressource	Ja	-	Die Datenquelle für Bilder, die lokale Bilder und Netzwerkbilder unterstützt. Bei der Verwendung relativer Pfade zum Verweisen auf Bildressourcen, z. B. Image("common/test.jpg"), wird der Aufruf der Image-Komponente über Pakete/Module hinweg nicht unterstützt. Es wird empfohlen, die Methode $r zum Verwalten von Bildern zu verwenden Ressourcen, die global genutzt werden müssen. - Zu den unterstützten Bildformaten gehören PNG, JPG, BMP, SVG und GIF. - Unterstützt Base64-Strings. Formatieren Sie Daten:image/[png|jpeg|bmp|webp];base64,[base64-Daten], wobei [base64-Daten] Base64-Zeichenfolgendaten sind. – Unterstützt die Zeichenfolge mit dem Präfix dataability:// path, die für den Zugriff auf den durch dataability bereitgestellten Bildpfad verwendet wird.

Attribute

Name	Parametertyp	Standardwert	beschreiben
alt	Zeichenfolge | Ressource	-	Das beim Laden angezeigte Platzhalterbild. Es werden nur lokale Bilder unterstützt.
objectFit	ImageFit	Abdeckung	Stellen Sie den Zoomtyp des Bildes ein.
objectRepeat	ImageRepeat	NeinWiederholen	Legen Sie den Wiederholungsstil des Bildes fest. veranschaulichen: - Die Bildquelle vom Typ SVG unterstützt dieses Attribut nicht.
Interpolation	Bildinterpolation	Keiner	Stellen Sie den Interpolationseffekt des Bildes ein, dh reduzieren Sie das Aliasing-Problem, das beim Vergrößern und Anzeigen von Bildern mit niedriger Auflösung auftritt, und interpolieren Sie nur für die Bildvergrößerung. veranschaulichen: - Die Bildquelle vom Typ SVG unterstützt dieses Attribut nicht. – PixelMap-Ressourcen unterstützen dieses Attribut nicht.
renderMode	ImageRenderMode	Original	Legen Sie den Bildwiedergabemodus fest. veranschaulichen: - Die Bildquelle vom Typ SVG unterstützt dieses Attribut nicht.
Quellengröße	{ Breite: Zahl, Höhe: Zahl }	-	Legen Sie die Bilddekodierungsgröße fest und dekodieren Sie das Originalbild in ein Bild der angegebenen Größe. Die Einheit des Zahlentyps ist px. veranschaulichen: – PixelMap-Ressourcen und SVG-Bilder unterstützen dieses Attribut nicht.
matchTextDirection	Boolescher Wert	FALSCH	Legen Sie fest, ob das Bild der Systemsprachenrichtung folgt und den Spiegel-Flip-Anzeigeeffekt in der RTL-Sprachumgebung anzeigt.
fitOriginalSize	Boolescher Wert	WAHR	Wenn die Bildkomponentengröße nicht festgelegt ist, wird angegeben, ob die Anzeigegröße der Bildquellengröße entspricht.
Füllfarbe	Ressourcenfarbe	-	Es ist nur für die SVG-Bildquelle wirksam. Nach der Einstellung ersetzt es die Füllfarbe des SVG-Bilds.
autoResize	Boolescher Wert	WAHR	Ob es notwendig ist, die Größe der Bildquelle während des Bilddekodierungsprozesses zu ändern. Dieser Vorgang bestimmt die Größe der Bildquelle zum Zeichnen basierend auf der Größe des Anzeigebereichs, was dazu beiträgt, den Speicherverbrauch zu reduzieren.
syncLoad8+	Boolescher Wert	FALSCH	Legen Sie fest, ob Bilder synchron geladen werden sollen. Die Standardeinstellung ist asynchrones Laden. Beim synchronen Laden wird der UI-Thread blockiert und das Platzhalterbild wird nicht angezeigt.

Ereignis

• onComplete : Dieser Rückruf wird ausgelöst, wenn das Bild erfolgreich geladen wurde, und gibt die Originalgrößeninformationen des Bildes zurück.
• onError : Dieser Rückruf wird ausgelöst, wenn beim Laden des Bildes eine Ausnahme auftritt.
• onFinish : Wenn es sich bei der geladenen Quelldatei um ein SVG-Bild mit animierten Effekten handelt, wird dieser Rückruf ausgelöst, wenn die animierten SVG-Effekte abgespielt werden. Wenn es sich bei den animierten Effekten um Endlosschleifenanimationen handelt, wird dieser Rückruf nicht ausgelöst.

3. Beispiel

Code

// @ts-nocheck
@Entry
@Component
struct Index {
  // @ts-ignore
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Image($r("app.media.icon")) //本机加载（就是本地的App图标）
          .width(180)
          .height(180)
          .renderMode(ImageRenderMode.Original) //  原图渲染
          .onClick(() => { //  通用事件
            if (this.src == this.on || this.src == this.off2on) {
              this.src = this.on2off
            } else {
              this.src = this.off2on
            }
          })
          .onComplete((msg: { width: number,height: number }) => {
            console.log(msg.width)
            console.log(msg.height)
          })
          .onFinish(() => {
          if (this.src == this.off2on) {
            this.src = this.on
          } else {
            this.src = this.off
          }
        })
        Image('https://img.sample.com/imgs/test.png') //加载网络图片
          .width(180)
          .height(80)
          .onError(() => {
            console.error('load image fail') //image加载会失败 没申请权限
          })
        // @ts-ignore
        Image(this.pixelMap) // pixelMap为内存图片
          .width(180)
          .height(80)
      }
      .width('100%')
    }
    .height('100%')
  }
}

Okay, lasst uns aufhören, das zu schreiben!

Bitte kommen Sie oft zu mir nach Hause, um mich zu sehen, wenn Sie Zeit haben. Vielen Dank, dass Sie hier sind ...

Meine Heimatadresse: Aden

Abschließend gebe ich Ihnen ein Gedicht:

Die Berge sind hoch, die Straßen weit entfernt und die Gruben tief,
und die Armee galoppiert in alle Richtungen,

Wer wagt es, aufrecht zu stehen?
Einfach liken und der Armee folgen.