在前端开发中，一个常见的任务是从服务器上获取图片并将其展示在网页上。本篇文章将介绍如何使用jQuery来加载图片并将其添加到DOM中。
使用jQuery加载图片
在jQuery中，我们可以使用$.ajax()函数来加载图片。以下是一个简单的例子：
-- -------------------- ---- -------
--------
---- --------------------
------- ------
--------- -------
-------- -------------- -
-- ------
--
------ ------------- ------- ------ -
-- ------
-
---上面的代码中，我们通过url参数指定了图片的路径，method参数指定了 HTTP 请求方法，dataType 参数指定了需要加载的数据类型（在这种情况下是二进制数据）。当请求成功时，success函数将被调用并且接收到的数据将会作为参数传递给它。如果请求失败，则会调用error函数。
我们可以使用以下方法将二进制数据转换为一个可用的URL：
var url = URL.createObjectURL(data);
然后，我们可以创建一个新的<img>元素并将其src属性设置为刚刚创建的URL：
var img = $('<img>');
img.attr('src', url);现在，我们已经成功地加载了图片并创建了一个新的<img>元素，但是它仍然没有添加到DOM中。下一节将解释如何将其添加到DOM中。
将图片添加到DOM中
要将<img>元素添加到DOM中，我们可以使用以下代码：
$('body').append(img);上面的代码将在<body>元素的末尾添加新创建的<img>元素。您可以根据需要更改选择器以将其添加到不同位置。
示例代码
下面是一个完整的示例代码，展示了如何使用jQuery加载图片并将其添加到DOM中：
-- -------------------- ---- -------
--------
---- --------------------
------- ------
--------- -------
-------- -------------- -
--- --- - --------------------------
--- --- - -----------
--------------- -----
----------------------
--
------ ------------- ------- ------ -
----------------------
-
---上面的代码将从服务器加载名为image.jpg的图片，并将其添加到<body>元素的末尾。如果加载失败，则会在控制台打印错误消息。
结论
本文介绍了如何使用jQuery加载图片并将其添加到DOM中。通过这种方法，您可以方便地从服务器加载图片并将其添加到网页中。希望这篇文章能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27971