Image

<Image> 是用于渲染图片的 UI 组件。图片可以通过 URL、资源 URL (res://)、base64 字符串、字体资源 (font://)、ImageSource 和 ImageAsset 进行引用。

<Image src="~/assets/logo.png" height="60" />

示例 ​

从 App_Resources 显示图片 ​

要从平台特定位置 (App_Resources/Android/drawable-XXX/ 或 App_Resources/iOS/) 显示图片，请使用 res:// 作为前缀。

<Image src="res://icon" />

从 src/assets 目录显示图片 ​

默认情况下，放置在 src/assets 目录（如果不存在，请创建该目录）中的所有资源将被复制到正确的原生平台位置，并与应用程序捆绑在一起。要引用这些图片，请使用 ~ 字符作为前缀，该字符是指向 src 文件夹的别名。

<Image src="~/assets/logo.png" />

从 URL 显示图片 ​

可以从远程 URL 显示图片。根据设备的软件版本，不安全的 URL 可能被阻止 (http://)，建议始终使用安全的 URL (https://)。

<Image
  src="https://art.nativescript.org/logo/export/NativeScript_Logo_Blue_White.png"
/>

显示 base64 编码的图片 ​

可以从 base64 编码的字符串显示图片。

<Image src="data:Image/png;base64,iVBORw..." />

将字体图标渲染为图片 ​

可以通过使用 font:// 作为前缀并通过例如 CSS 类设置正确的 font-family 将字体符号渲染为图片

<Image src="font://&#xf004;" class="fas" />

.fas {
  font-family: 'Font Awesome';
  /* ... */
}

属性 ​

src ​

src: string | ImageSource | ImageAsset

获取或设置源。

字符串可以是 http://、https://、res://、font:// 或绝对路径 (例如 ~/assets/image.png)。

请参阅 ImageSource 和 ImageAsset。

imageSource ​

imageSource: ImageSource

从 ImageSource 实例获取或设置源。

请参阅 ImageSource。

tintColor ​

tintColor: Color | string

设置颜色以对图片进行着色。

请参阅 Color。

stretch ​

stretch: ImageStretchType // "none" | "aspectFill" | "aspectFit" | "fill"

获取或设置调整图片大小以填充其分配空间的方式。

请参阅 ImageStretchType

loadMode ​

loadMode: 'sync' | 'async'

获取或设置图片的加载策略。

默认值：async。

有效值

• sync - 如果需要，会阻塞 UI 以立即显示。仅推荐用于小图片，例如图标。
• async - 在后台加载，图片可能会有短暂的延迟，适合大型图片。

注意：从网络加载图片时，始终以 async 模式加载。

...继承 ​

有关更多继承属性，请参阅 API 参考。

原生组件 ​

• Android: android.widget.ImageView
• iOS: UIImageView