Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Pass Image as a parameter in JavaScript function ?

  • Last Updated : 01 Sep, 2020

We all are familiar with functions and its parameters and we often use strings, integers, objects, arrays as a parameter in JavaScript functions but now will see how to pass an image as a parameter in JavaScript function. We will use vanilla JavaScript here.

First, create a function that receives a parameter then calls that function. The parameter should be a string that refers to the location of the image.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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:

  1. 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.
  2. Create a script tag in which we all are going to make all our logics.
  3. Create a variable named divLocation and assign the DOM element of that div into the variable.
  4. Now create an img element with document.createElement() and assign it into variable imgElement.
  5. Then assign the URL of the image to its href attribute by using imgElement.href = /image location/.
  6. Now append the img Element to the div element by append() method.




<!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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :