How to pass image as a parameter in JavaScript function ? Last Updated : 18 Jan, 2023 Comments Improve Suggest changes Like Article Like Report 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: Comment More infoAdvertise with us Next Article How to pass image as a parameter in JavaScript function ? devi_johns Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions 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 2 min read 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 1 min read 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, 2 min read 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 3 min read 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 3 min read JavaScript Function Parameters Function parameters are variables defined in the function declaration that receive values (arguments) when the function is called. They play a key role in making functions reusable and dynamic.Values are assigned to parameters in the order they are passed.You can assign default values to parameters 2 min read How to write a function in JavaScript ? JavaScript functions serve as reusable blocks of code that can be called from anywhere within your application. They eliminate the need to repeat the same code, promoting code reusability and modularity. By breaking down a large program into smaller, manageable functions, programmers can enhance cod 4 min read How to Crop an Image in JavaScript? To crop an image in JavaScript, you can use the <canvas> element to manipulate the image's dimensions and crop it to a specified area. This approach is flexible and works entirely in the browser without needing external libraries. Here's a step-by-step example demonstrating how to crop an imag 3 min read How to call JavaScript function in HTML ? In HTML, you can easily call JavaScript functions using event attributes like onclick and onload. Just reference the function name within these attributes to trigger it. You can also call functions directly within script blocks using standard JavaScript syntax. Let's create an HTML structure with so 2 min read How to transform String into a function in JavaScript ? In this article, we will see how to transform a String into a function in JavaScript. There are two ways to transform a String into a function in JavaScript. The first and easy one is eval() but it is not a secure method as it can run inside your application without permission hence more prone to th 3 min read Like