在 html 中，图像元素用于在网页上显示图像。根据需求取多个属性，如‘src’、‘alttext’、‘height’、‘width’等。
在某些情况下，我们需要动态添加图片到网页中。例如，我们在数据库中存储了未知数量的电影数据。我们需要获取电影数据，并且需要显示电影图像以及每部电影的详细信息。在这种情况下，我们需要使用 javascript 将图像和数据附加到 dom。
下面，我们将学习使用javascript向网页添加图像元素。
使用 document.createelement() 方法document.createelement() 方法使用 javascript 创建任何 html 元素。它将标签名称作为参数并返回 html 元素。
在javascript中创建html元素后，我们可以修改其各种属性并将其附加到dom以在网页上显示图像。
语法用户可以按照下面的语法使用 document.createelement() 方法动态创建图像元素。
let dynamicimage = document.createelement('img');dynamicimage.src = url;
在上面的语法中，我们使用 createelement() 方法创建了图像元素，并更新了图像元素的“src”属性。
示例在下面的示例中，我们首先创建了图像元素。之后，我们用我们想要在网页上显示的图像 url 更新了它的“src”属性。
接下来，我们使用 id 从 dom 访问预定义的 div 元素，并使用appendchild() 方法将新创建的图像附加为 div 元素的子元素。
在输出中，用户可以观察到图像是使用 javascript 添加的。
<html><body> <h3>using the <i> document.createelement() method </i> to create image element dynamically using javascript </h3> <div id = img> </div> <script> let img = document.getelementbyid('img'); // create image element let dynamicimage = document.createelement('img'); // initialize the image source dynamicimage.src = https://www.tutorialspoint.com/static/images/logo.png; // add image to dom img.appendchild(dynamicimage); </script></body></html>
示例在下面的示例中，我们创建了按钮。每当用户单击该按钮时，它就会执行 createimage() 函数。
在createimage()函数中，我们使用createelement()方法创建一个新的图像元素并更新其“src”属性值。此外，我们使用 setattribute() 方法来设置图像的 id、高度和宽度。
在输出中，用户可以单击按钮查看 200 x 200 尺寸的图像。但是，用户可以更改代码中的尺寸并运行代码来观察输出。
<html><body> <h3>using the <i> document.createelement() method </i> to create image element dynamically using javascript </h3> <div id = img> </div> <button id = addimage onclick = createimage()> create image </button> <script> function createimage() { let img = document.getelementbyid('img'); let newimage = document.createelement('img'); newimage.src = https://www.tutorialspoint.com/static/images/simply-easy-learning.png; // set attribute values for the image newimage.setattribute('id', 'myimage'); newimage.setattribute('width', '200px'); newimage.setattribute('height', '200px'); img.appendchild(newimage); } </script></body></html>
使用 image() 构造函数image() 是一个构造函数，用于在 javascript 中创建图像元素的实例。我们使用带有“new”关键字的构造函数在 javascript 中创建图像的实例并将其附加到 dom 对象。
语法用户可以按照以下语法使用 image() 构造函数通过 javascript 创建图像。
let img = new image();img.src = url;
在上面的语法中，我们使用 image() 构造函数创建了图像元素的实例，并更新了其 src 属性的值。
示例在下面的示例中，当用户单击按钮时，它会执行 createimage() 函数以动态附加到 dom。
在 createimage() 函数中，我们使用 image() 构造函数初始化图像实例，然后更新其 src 属性的值。此外，我们通过更新属性值来设置图像的宽度和高度，并将其附加为 div 元素的子元素。
<html><body> <h3>using the <i> image() constructor </i> to create image element dynamically using javascript</h3> <div id = img> </div> <button id = addimage onclick = createimage()> create image </button> <script> function createimage() { let img = document.getelementbyid('img'); let devimage = new image(); devimage.src = https://www.tutorialspoint.com/static/images/development.svg; devimage.setattribute('width', '300px'); devimage.setattribute('height', '300px'); img.appendchild(devimage); } </script></body></html>
示例在下面的示例中，我们使用 javascript 将多个图像附加到网页。
在 addmultiple() 函数中，我们有一个图像 url 数组。我们遍历数组，并在每次迭代中创建一个新的图像元素，使用给定的源 url 更新 src 属性，并将其附加到 dom。
在输出中，用户可以单击按钮在网页上看到五个动态图像。此外，每次用户单击该按钮时，都会更改图像。
<html><body> <h3>using the <i> image() constructor </i> to create image element dynamically using javascript</h3> <div id = img> </div> <br> <br> <button id = addimage onclick = addmultiple()> add multiple images </button> <script> function addmultiple() { let img = document.getelementbyid('img'); let imageurls = [ https://picsum.photos/200/300, https://picsum.photos/200/300/?blur, https://picsum.photos/200/300.webp, https://picsum.photos/200, https://picsum.photos/200/300 ] // fetch random images and append to the dom for (let i = 0; i < 5; i++) { let randomimage = new image(); randomimage.src = imageurls[i]; randomimage.alt = random image; randomimage.width = 100; randomimage.height = 100; // add right and left margin to the image randomimage.style.marginright = 10px; randomimage.style.marginleft = 10px; img.appendchild(randomimage); } } </script></body></html>
我们学习了两种将图像动态附加到 dom 元素的方法。 createelement() 方法创建任何 html 元素的实例，包括图像元素。 image() 构造函数仅用于创建图像元素的实例，而不用于创建其他 html 元素。
另外，如上个例子，我们在实时开发中可能会得到一个图片url数组，需要在网页中追加多张动态图片。
以上就是如何使用javascript动态创建图像元素？的详细内容。