在前端开发中，我们经常需要在网页中显示图像。通过使用 img 元素，我们可以轻松地将图片添加到 HTML 中。但是，在某些情况下，我们可能需要以编程方式向页面添加图像，例如在用户上传新图片后动态更新页面。这时候，我们可以使用 JavaScript 来实现。
基本步骤
要使用 JavaScript 向 HTML 中添加图像，我们需要遵循以下基本步骤：
- 创建一个
img元素 - 设置
src属性为图像的 URL - （可选）设置其他属性，如
alt和title - 将
img元素添加到 HTML DOM 中
让我们看一下实现这些步骤的代码示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- --------------
-------
------
---- ---------------------------
--------
-- -- --- --
----- --- - ------------------------------
-- -- --- --
------- - --------------------------------
-- -- --- - ----- ------
------- - -------- -------
--------- - -------- -------
-- --- --- -
----- --------- - -------------------------------------------
---------------------------
---------
-------
-------上述代码将在一个空白的 div 容器中添加一个图像。我们创建了一个 img 元素，设置了其 src 属性，并将其添加到具有特定 ID 的容器中。这是一个非常简单的例子，但您可以根据需要自定义更多属性。
动态添加图片
在某些情况下，我们可能需要动态地向页面添加图像，例如在用户上传新图片后。以下是一个动态添加图像的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- --------------
-------
------
------ ----------- -----------------
---- ---------------------------
--------
----- ----- - ---------------------------------------
----- --------- - -------------------------------------------
-------------------------------- -- -- -
----- ---- - ---------------
-- ------ -
----- ------ - --- -------------
------------------------------- -- -- -
----- --- - ------------------------------
-- -- --- ------ ---- ---
------- - --------------
---------------------------
---
---------------------------
-
---
---------
-------
-------该示例代码创建了一个包含文件输入框和图像容器的 HTML 页面。当用户选择文件并上传时，JavaScript 将其读取为 data URL，并将其作为 img 元素的 src 属性添加到页面中。这是一种非常基本的实现，但您可以根据需要进行修改和扩展。
总结
在本文中，我们探讨了如何使用 JavaScript 将图像添加到 HTML 中。我们学习了基本步骤以及如何动态地向页面添加图像。这些技术可以帮助您更好地控制网页中的图像，并为用户提供更好的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15161