ImageView

A View that displays an image.

Process: Main

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

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

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://electronjs.org')

Class: ImageView extends View

History

Version(s)	Changes
None	API ADDED

A View that displays an image.

Process: Main

ImageView inherits from View.

ImageView is an EventEmitter.

warning

Electron's built-in classes cannot be subclassed in user code. For more information, see the FAQ.

new ImageView() Experimental

History

Version(s)	Changes
None	API ADDED

Creates an ImageView.

Instance Events

Event: 'bounds-changed'

Inherited from View

Emitted when the view's bounds have changed in response to being laid out. The new bounds can be retrieved with view.getBounds().

Instance Properties

image.children Readonly

Inherited from View

A View[] property representing the child views of this view.

Instance Methods

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

image.setImage(image) Experimental

History

Version(s)	Changes
None	API ADDED

• image NativeImage

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

image.addChildView(view[, index])

Inherited from View

• view View - Child view to add.
• index Integer (optional) - Index at which to insert the child view. Defaults to adding the child at the end of the child list.

If the same View is added to a parent which already contains it, it will be reordered such that it becomes the topmost view.

image.removeChildView(view)

Inherited from View

• view View - Child view to remove.

If the view passed as a parameter is not a child of this view, this method is a no-op.

image.setBounds(bounds[, options])

Inherited from View

• bounds Rectangle - New bounds of the View.
• options Object (optional) - Options for setting the bounds.
  • animate boolean | Object (optional) - If true, the bounds change will be animated. If an object is passed, it can contain the following properties:
    • duration Integer (optional) - Duration of the animation in milliseconds. Default is 250.
    • easing string (optional) - Easing function for the animation. Default is linear.
      • linear
      • ease-in
      • ease-out
      • ease-in-out

image.getBounds()

Inherited from View

Returns Rectangle - The bounds of this View, relative to its parent.

image.setBackgroundColor(color)

Inherited from View

• color string - Color in Hex, RGB, ARGB, HSL, HSLA or named CSS color format. The alpha channel is optional for the hex type.

Examples of valid color values:

• Hex
  • #fff (RGB)
  • #ffff (ARGB)
  • #ffffff (RRGGBB)
  • #ffffffff (AARRGGBB)
• RGB
  • rgb\(([\d]+),\s*([\d]+),\s*([\d]+)\)
    • e.g. rgb(255, 255, 255)
• RGBA
  • rgba\(([\d]+),\s*([\d]+),\s*([\d]+),\s*([\d.]+)\)
    • e.g. rgba(255, 255, 255, 1.0)
• HSL
  • hsl\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)
    • e.g. hsl(200, 20%, 50%)
• HSLA
  • hsla\((-?[\d.]+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)
    • e.g. hsla(200, 20%, 50%, 0.5)
• Color name
  • Options are listed in SkParseColor.cpp
  • Similar to CSS Color Module Level 3 keywords, but case-sensitive.
    • e.g. blueviolet or red

note

Hex format with alpha takes AARRGGBB or ARGB, not RRGGBBAA or RGB.

image.setBorderRadius(radius)

Inherited from View

• radius Integer - Border radius size in pixels.

note

The area cutout of the view's border still captures clicks.

image.setBackgroundBlur(blurRadius)

Inherited from View

• blurRadius Integer - The radius of the background blur effect (in pixels).

note

You must set a background color with an alpha channel (e.g. #80ffffff) in order for the blur effect to be visible.

image.setVisible(visible)

Inherited from View

• visible boolean - If false, the view will be hidden from display.

image.getVisible()

Inherited from View

Returns boolean - Whether the view should be drawn. Note that this is different from whether the view is visible on screen—it may still be obscured or out of view.