Skip to main content

ImageView

显示图片的视图。

进程：主进程

🌐 Process: Main

在app模块的ready事件被触发之前，该模块无法使用。

🌐 This module cannot be used until the ready event of the app module is emitted.

用于显示启动画面，当内容加载完成后会被 WebContentsView 替换。

🌐 Useful for showing splash screens that will be swapped for WebContentsViews when the content finishes loading.

请注意，ImageView 是实验性的，将来可能会被更改或移除。

🌐 Note that ImageView is experimental and may be changed or removed in the future.

const { BaseWindow, ImageView, nativeImage, WebContentsView } = require('electron')

const path = require('node:path')

const win = new BaseWindow({ width: 800, height: 600 })

// Create a "splash screen" image to display while the WebContentsView loads
const splashView = new ImageView()
const splashImage = nativeImage.createFromPath(path.join(__dirname, 'loading.png'))
splashView.setImage(splashImage)
win.setContentView(splashView)

const webContentsView = new WebContentsView()
webContentsView.webContents.once('did-finish-load', () => {
  // Now that the WebContentsView has loaded, swap out the "splash screen" ImageView
  win.setContentView(webContentsView)
})
webContentsView.webContents.loadURL('https://electron.nodejs.cn')

类：ImageView 继承 View​

🌐 Class: ImageView extends View

显示图片的视图。

进程：主进程

🌐 Process: Main

ImageView 继承自 View。

ImageView 是一个 事件触发器。

warning

Electron 内置的类不能在用户代码中被继承。 欲了解更多信息，请参见 常见问题。

new ImageView() 实验性​

🌐 new ImageView() Experimental

创建一个 ImageView。

🌐 Creates an ImageView.

实例方法​

🌐 Instance Methods

除了继承自 View 的方法外，ImageView 类的实例还可以使用以下方法：

🌐 The following methods are available on instances of the ImageView class, in addition to those inherited from View:

image.setImage(image) 实验性​

🌐 image.setImage(image) Experimental

  • image 原生图片

设置此 ImageView 的图片。请注意，只有 NativeImage 支持的图片格式才能用于 ImageView。

🌐 Sets the image for this ImageView. Note that only image formats supported by NativeImage can be used with an ImageView.