作为前台开发人员 ， 在使用服务器中存储的图片时，需要通过一定的方式从服务器中读取并展示在网页上 。本文将介绍前台如何从服务器中读取图片，希望能够对前台开发人员有所帮助 。
1. 使用HTML标签img实现图片获取
前台可以使用HTML标签img来获取服务器中存储的图片，该标签具有src属性，可以将图片的文件路径指定为该属性的值 。从而实现图片的加载 。例如：
文章插图
2. 使用ajax请求获取图片
前台也可以使用ajax的方式向服务器发送请求，获取图片数据 。通过XMLHttpRequest对象获取图片数据，并使用Blob对象将响应数据转换成二进制数据流 。在将二进制数据流转换成图片数据，并展示在网页上 。例如：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/images/example.jpg');
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
var img = document.createElement('img');
img.src = http://server.evianbaike.com/article/window.URL.createObjectURL(xhr.response);
document.body.appendChild(img);
}
};
xhr.send();
3. 使用jQuery库获取图片
前台也可以使用jQuery库提供的$.ajax()函数获取图片数据 。该函数会自动将响应数据转换成JavaScript对象或数组 ， 并返回给回调函数 。前台只需要在回调函数中使用URL.createObjectURL()方法将响应数据转换为blob对象 ， 并展示在网页上 。例如：
$.ajax({
url: 'http://www.example.com/images/example.jpg',
method: 'GET'
}).done(function(data) {
var img = document.createElement('img');
img.src = http://server.evianbaike.com/article/window.URL.createObjectURL(data);
document.body.appendChild(img);
});
【如何让前台从服务器获取图片？ 前台怎么从服务器读取图片】无论是使用HTML标签img ， 还是使用ajax请求或者jQuery库，前台开发人员都可以轻松从服务器中读取图片，并将其展示在网页上 。希望本文能够对前台开发人员有所帮助 。
