HTML DOM Image src Property
The HTML DOM Image src Property is used to set or returns the value of the src attribute of the <img> element. This attribute is used to specify the URL of the Image.
Syntax:
-
Returns the image src property.
imageObject.src
-
Set the image src property.
imageObject.src = URL
Property Values: It contains a single value URL that specifies the URL of the document that is embedded in the Image. There are two types of URL links which are listed below:
- Absolute URL: It points to another webpage.
- Relative URL: It points to other files of the same web page.
Return value: It returns a string value that represents the URL of the image.
Example: Below code returns the src Property.
HTML
<!DOCTYPE html> < html > < body > < center > < h1 style = "color: green" > w3wiki </ h1 > < h2 >HTML DOM Image src Property</ h2 > < img id = "GFG" src = "https://media.w3wiki.net/wp-content/uploads/a1-25.png" width = "400" height = "150" /> < br > < button onclick = "Beginner()" > Click me! </ button > < p id = "sudo" ></ p > </ center > < script > function Beginner() { var g = document.getElementById("GFG").src; document.getElementById("sudo").innerHTML = g; } </ script > </ body > </ html > |
Output:
Example 2: This example sets the src property.
HTML
<!DOCTYPE html> < html > < body > < center > < h1 style = "color: green" >w3wiki</ h1 > < h2 >HTML DOM Image src Property</ h2 > < img id = "GFG" src = "https://media.w3wiki.net/wp-content/uploads/a1-25.png" width = "400" height = "150" /> < br > < button onclick = "Beginner()" >Click me!</ button > < p id = "sudo" ></ p > </ center > < script > function Beginner() { var g = document.getElementById("GFG").src = "https://media.w3wiki.net/wp-content/uploads/20210915115837/gfg3-300x300.png" document.getElementById("sudo").innerHTML = g; } </ script > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome
- Firefox
- Internet Explorer
- Opera
- Apple Safari