HTMLImageElement : HTMLElement

HTMLImageElement is an element that displays an image. It corresponds to the <img> tag. See also Image.

Instance Properties

Alternate text describing the image.

Example:

<img id='sunset' src='/pic.jpg' alt='BVI Sunset'>
<script>
  var img = document.getElementById('sunset');
  console.log(img.alt);
</script>

Run

Results:

complete : Boolean

Returns true once the image has loaded.

Example:

<img id='sunset'>
<script>
  var img = document.getElementById('sunset');
  img.src = '/pic.jpg';
  console.log('before load, complete=' + img.complete);
  img.onload = function() {
    console.log('after load, complete=' + img.complete);
  }
</script>

Run

Results:

height : Number

The display height (in pixels) of the image. If not set, the height will be naturalHeight after the image loads.

Example:

<img id='sunset' src='/pic.jpg' width='120' height='90'>
<script>
  var img = document.getElementById('sunset');
  console.log(img.height);
</script>

Run

Results:

naturalHeight : Number readonly

The pixel height of the image buffer. May be different than the height displayed on screen if height is set on the image.

Example:

<img id='sunset' src='/pic.jpg' width='120' height='90'>
<script>
  var img = document.getElementById('sunset');
  img.onload = function() {
    console.log('height: ' + img.height);
    console.log('naturalHeight: ' + img.naturalHeight);
  }
</script>

Run

Results:

naturalWidth : Number readonly

The pixel width of the image buffer. May be different than the width displayed on screen if width is set on the image.

Example:

<img id='sunset' src='/pic.jpg' width='120' height='90'>
<script>
  var img = document.getElementById('sunset');
  img.onload = function() {
    console.log('width: ' + img.width);
    console.log('naturalWidth: ' + img.naturalWidth);
  }
</script>

Run

Results:

src : String

The location of the image.

Example:

<img id='sunset' src='/pic.jpg' alt='BVI Sunset'>
<script>
  var img = document.getElementById('sunset');
  console.log(img.src);
</script>

Run

Results:

width : Number

The display width (in pixels) of the image. If not set, the width will be naturalWidth after the image loads.

Example:

<img id='sunset' src='/pic.jpg' width='120' height='90'>
<script>
  var img = document.getElementById('sunset');
  console.log(img.height);
</script>

Run

Results:

Instance Events

onload / 'load' event

listener(event : Event) : undefined

Fired when the image has loaded. After this point this.complete will be true.

Example:

<img id='sunset'>
<script>
  var img = document.getElementById('sunset');
  img.src = '/pic.jpg';
  console.log('before load, complete=' + img.complete);
  img.onload = function() {
    console.log('after load, complete=' + img.complete);
  }
</script>

Run

Results:

home license contribute feedback toggle light/dark mode