How to set image src in javascript

Question

The HTMLImageElement property src, which reflects the HTML src attribute, specifies the image to display in the <img> element.

Table of Contents Show

Specifying a single image
Using src with an image set
Specifying a fallback for viewport-based selection
Specifications
Browser compatibility
Clear Img src attribute using JavaScript #
Can we change image src using JavaScript?
How do I put an image in JavaScript?
How do I add an image to a src?
What is IMG src in JavaScript?

Value

When providing only a single image, rather than a set of images from which the browser selects the best match for the viewport size and display pixel density, the src attribute is a string specifying the URL of the desired image. This can be set either within the HTML itself using the src content attribute, or programmatically by setting the element's src property.

If you use the srcset content attribute to provide multiple image options for different display pixel densities, the URL specified by the src attribute is used in one of two ways:

as a fallback for browsers that don't support srcset.
as an equivalent for specifying an image in srcset with the size multiplier 1x; that is, the image specified by src is used on low-density screens (such as typical 72 DPI or 96 DPI displays).

Additionally, if you use src along with both sizes (or the corresponding sizes content attribute) and srcset in order to choose an image based on the viewport size, the src attribute is only used as a fallback for browsers that don't support sizes and srcset; otherwise, it's not used at all.

Examples

Specifying a single image

HTML

<img
  src="grapefruit-slice-332-332.jpg"
  width="160"
  alt="Slices of grapefruit, looking yummy." />

Result

Using src with an image set

When using a set of images with the srcset property, the src serves as either a fallback for older browsers, or as the 1x size of the image.

HTML

Result

Specifying a fallback for viewport-based selection

When using viewport-bases selection of an image from a srcset by also specifying the sizes property, the src property serves as the fallback to be used on browsers that don't support viewport-based selection. Browsers that do support viewport-based selection will ignore src in this situation.

HTML

Result

Specifications

Specification
HTML Standard # dom-img-src

Browser compatibility

BCD tables only load in the browser

Clear Img src attribute using JavaScript #

To clear an image src attribute:

Use the setAttribute() method to set the image's src attribute to an empty string.
Alternatively, hide the image element.

Here is the HTML for the examples in this article.

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <img id="img" src="https://example.com/does-not-exist.jpg" alt="banner" />

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

Copied!
const img = document.getElementById('img');

// 👇️ set image src attribute to empty string
img.setAttribute('src', '');

// 👇️ or hide image
img.style.display = 'none';

We used the setAttribute method to set the src attribute of the image element to an empty string.

However, if you do that the image is still displayed as being broken.

Alternatively, you can hide the image by setting its display property to none.

We used the display property to hide the image element, however you might need to use the visibility property, depending on your use case.

When an element's display property is set to none, the element is removed from the DOM and has no effect on the layout. The document is rendered as though the element does not exist.

On the other hand, when an element's visibility property is set to hidden, it still takes up space on the page, however the element is invisible (not drawn). It still affects the layout on your page as normal.

Here is an example that sets the image's visibility property to hidden.

Copied!
const img = document.getElementById('img');

img.style.visibility = 'hidden';

When the image's visibility is set to hidden, it is invisible, however it still takes up space on the page.

If you set the image's display property to none, the element is removed from the DOM and other elements take its space.

Can we change image src using JavaScript?

You can change an HTML image src attribute programatically by using JavaScript. First, you need to grab the HTML element by using JavaScript element selector methods like getElementById() or querySelector() and assign the element to a variable.

How do I put an image in JavaScript?

Add an image using javascript. Let's create a variable image with createElement ("img"): var img = document.createElement("img"); ... .

Change the style of the div element. You can then for example modify the style of the div containing the image with div.setAttribute("style", " "); ... .

Update the style of the image..

How do I add an image to a src?

To use an image on a webpage, use the <img> tag. The tag allows you to add image source, alt, width, height, etc. The src is to add the image URL. The alt is the alternate text attribute, which is text that is visible when the image fails to load.

What is IMG src in JavaScript?

Definition and Usage The required src attribute specifies the URL of an image. Note: The src property can be changed at any time. However, the new image inherits the height and width attributes of the original image, if not new height and width properties are specified.

kode javascript JavaScript image src Image JavaScript