How to pass image as a parameter in JavaScript function ?

How to pass image as a parameter in JavaScript function ?

Last Updated : 18 Jan, 2023

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.geeksforgeeks.org/gfg-gg-logo.svg" 
        
        displayImage(Pic);
    </script>
</body>
</html>

Output:

How to pass image as a parameter in JavaScript function ?

D

devi_johns

Improve

Article Tags :

Similar Reads

How to pass an array as a function parameter in JavaScript?

Here are different ways to pass an array as a function paramter in JavaScript.1. Using apply() MethodThe apply() method invokes a function with a specified `this` value and an array of arguments. It takes two parameters: the first is the `this` context for the function, and the second is an array of

Passing a function as a parameter in JavaScript

In this article, we will pass a function as a parameter in JavaScript. Passing a function as an argument to the function is quite similar to passing a variable as an argument to the function. So variables can be returned from a function. The below examples describe passing a function as a parameter

JavaScript Passing parameters to a callback function

Callback FunctionPassing a function to another function or passing a function inside another function is known as a Callback Function. In other words, a callback is an already-defined function that is passed as an argument to the other code Syntax:function geekOne(z) { alert(z); }function geekTwo(a,

How to Pass Object as Parameter in JavaScript ?

We'll see how to Pass an object as a Parameter in JavaScript. We can pass objects as parameters to functions just like we do with any other data type. passing objects as parameters to functions allows us to manipulate their properties within the function. These are the following approaches: Table of

How to create an image map in JavaScript ?

An image map is nothing but an image that is broken into various hotspots and each hotspot will take you to a different file. Hotspots are nothing but clickable areas which we create on an image by using the <area> tag. This type of map is called a client-side image map as the map is embedded