JavaScript 如何在函数中将图像作为参数传递

我们都熟悉函数及其参数，我们经常在JavaScript函数中使用字符串、整数、对象和数组作为参数，但现在我们将看到如何在JavaScript函数中将图像作为参数传递。我们将在这里使用纯JavaScript。

方法： 首先，创建一个接收参数的函数，然后调用该函数。参数应该是一个字符串，指向图像的位置。

语法：

function displayImage (picUrl) {
    ...
}

displayImage('/assets/myPicture.jpg')

示例： 在这个示例中，我们将在一个id为“imgDiv”的DIV中显示一个图像。

<div id="imgDiv">
    <!-- Here we show the picture -->
</div>

步骤：

首先，创建一个标记，其中包含一个 h1 标签和一个 div 标签，其id为 imgDiv ，我们将在其中插入图片。
创建一个脚本标签，在其中进行所有逻辑操作。
创建一个名为 divLocation 的变量，并将该div的DOM元素赋值给该变量。
现在使用 document.createElement() 创建一个img元素，并将其赋值给变量imgElement。
然后，通过 使用imgElement.href = /image location/ 将图片的URL赋值给其href属性。
现在通过 append() 方法将img元素附加到div元素上。

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

输出：

JavaScript 如何在函数中将图像作为参数传递