How to pass image as a parameter in JavaScript function ?

0 0 1 minute read

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 = 
"https://media.zambiatek.com/gfg-gg-logo.svg"  
          
        displayImage(Pic); 
    </script> 
</body> 
</html>