We all are familiar with functions and their parameters and we often use strings, integers, objects, and arrays as a parameter in JavaScript functions but now will see how to pass an image as a parameter in the JavaScript functions. We will use vanilla JavaScript here.
Approach: First, create a function that receives a parameter and then calls that function. The parameter should be a string that refers to the location of the image.
Syntax:
function displayImage (picUrl) {
...
}
displayImage('/assets/myPicture.jpg')
Example: In this example, we will display an image inside a DIV whose id is “imgDiv”.
<div id="imgDiv">
<!-- Here we show the picture -->
</div>
Steps:
- First, create a markup that has an h1 and a div tag whose id is imgDiv in which we are going to insert the image.
- Create a script tag in which we all are going to make all our logics.
- Create a variable named divLocation and assign the DOM element of that div into the variable.
- Now create an img element with document.createElement() and assign it into variable imgElement.
- Then assign the URL of the image to its href attribute by using imgElement.href = /image location/.
- Now append the img Element to the div element by append() method.
html
<!DOCTYPE html>
<html>
<body>
<center>
<h1>Hello GFG</h1>
<div id="imgDiv"></div>
</center>
<script>
var Pic = ""
function displayImage(pic) {
let divLocation = document.getElementById("imgDiv");
let imgElement = document.createElement("img");
imgElement.src = pic
divLocation.append(imgElement);
}
Pic =
displayImage(Pic);
</script>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
18 Jan, 2023
Like Article
Save Article