如何在js中获取服务器图片

要在JavaScript中获取服务器图片，可以使用以下方法：

1. 使用Image对象：在JavaScript中，可以创建一个Image对象并将其src属性设置为服务器图片的URL。通过给Image对象绑定一个load事件，当图片加载完成后，可以通过调用Image对象的width和height属性获取图片的宽度和高度。

var img = new Image();
img.src = "服务器图片的URL";

img.onload = function() {
  console.log("图片加载完成");
  var width = img.width;
  var height = img.height;
  // 可以进行后续操作，例如显示图片等
};

2. 使用XMLHttpRequest对象：通过发送一个GET请求到服务器获取图片的二进制数据，然后将数据转换为Base64格式进行显示。使用XMLHttpRequest对象可以实现异步请求，可以通过监听readystatechange事件来获取服务器返回的图片数据。

var xhr = new XMLHttpRequest();
xhr.open("GET", "服务器图片的URL", true);
xhr.responseType = "arraybuffer";

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var byteArray = new Uint8Array(xhr.response);
    var binary = '';
    for (var i = 0; i < byteArray.byteLength; i++) {
      binary += String.fromCharCode(byteArray[i]);
    }
    var base64Data = btoa(binary);

    var img = document.createElement("img");
    img.src = "data:image/png;base64," + base64Data;
    document.body.appendChild(img);
  }
};

xhr.send();

以上是两种获取服务器图片的常用方法。可以根据具体需求选择合适的方法进行操作。

要在JavaScript中获取服务器图片，您可以使用以下方法：

1. 使用XMLHttpRequest对象：您可以使用XMLHttpRequest对象来发送HTTP请求并获取服务器上的图片。首先，创建一个XMLHttpRequest对象，然后使用open方法指定要获取图片的URL，并将responseType设置为"blob"，表示获取的数据为二进制格式。最后，使用send方法发送请求，并在接收到响应后使用URL.createObjectURL方法将获取的二进制数据转换为URL地址，然后将其赋值给img元素的src属性，即可显示图片。

var xhr = new XMLHttpRequest();
xhr.open('GET', '服务器图片URL', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    var blob = this.response;
    var img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  }
};

xhr.send();

2. 使用fetch API：fetch是一个现代的用于发送HTTP请求的API，它更简洁和强大。您可以使用fetch API来获取服务器上的图片。首先，使用fetch函数并传入服务器图片的URL来发送请求。然后，使用blob()方法将响应数据转换为二进制格式。最后，使用URL.createObjectURL方法将二进制数据转换为URL地址，并将其赋值给img元素的src属性。

fetch('服务器图片URL')
  .then(function(response) {
    return response.blob();
  })
  .then(function(blob) {
    var img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  });

3. 在HTML中直接引用：如果您可以在HTML中直接引用服务器上的图片，您可以使用img标签，并将src属性设置为服务器图片的URL。浏览器会自动发送请求并获取图片，并将其显示在页面上。

<img src="服务器图片URL" alt="服务器图片">

4. 使用jQuery库：如果您使用了jQuery库，可以使用它提供的方法来获取服务器图片。使用$.ajax方法发送GET请求，并设置responseType为"blob"，然后在成功回调函数中处理响应数据。

$.ajax({
  url: '服务器图片URL',
  type: 'GET',
  dataType: 'blob',
  success: function(blob) {
    var img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  }
});

5. 使用其他库或框架：如果您使用其他库或框架，比如Vue.js或React等，它们通常都有提供获取和显示图片的方法或组件。您可以查找相应的文档或示例来了解如何在特定的库或框架中获取服务器图片。

无论您选择哪种方法，都需要确保您具有获取服务器图片的权限，并且要注意确保获取的图片URL是正确的。

在JavaScript中获取服务器图片可以通过以下几种方法：

1、使用HTML <img>标签：可以通过创建一个<img>标签并设置它的src属性来获取服务器图片。具体步骤如下：

// 创建一个img标签
var img = document.createElement('img');
// 设置img标签的src属性为服务器图片的URL
img.src = '服务器图片的URL';
// 将img标签添加到页面中，此时浏览器会自动加载图片
document.body.appendChild(img);

2、使用Ajax请求：可以使用Ajax请求来获取服务器图片的数据并将其展示在页面上。具体步骤如下：

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方式和URL
xhr.open('GET', '服务器图片的URL', true);
// 设置响应类型为blob，用于处理图片数据
xhr.responseType = 'blob';
// 监听请求完成事件
xhr.onload = function() {
  if (xhr.status === 200) {
    // 创建一个img标签
    var img = new Image();
    // 将获取到的blob数据转换为URL
    var imageURL = URL.createObjectURL(xhr.response);
    // 设置img标签的src属性为URL
    img.src = imageURL;
    // 将img标签添加到页面中，此时图片会被加载并显示
    document.body.appendChild(img);
  }
};
// 发送请求
xhr.send();

3、使用Fetch API：Fetch API是新的web标准，也可以用来发送HTTP请求并获取服务器图片。具体步骤如下：

// 发送GET请求
fetch('服务器图片的URL')
  .then(function(response) {
    // 将获取到的响应数据转换为blob
    return response.blob();
  })
  .then(function(blob) {
    // 创建一个img标签
    var img = new Image();
    // 将blob数据转换为URL
    var imageURL = URL.createObjectURL(blob);
    // 设置img标签的src属性为URL
    img.src = imageURL;
    // 将img标签添加到页面中，此时图片会被加载并显示
    document.body.appendChild(img);
  });

4、使用jQuery库：如果你正在使用jQuery库，可以使用其提供的$.ajax()或$.get()方法来获取服务器图片。具体步骤如下：

// 使用$.get()方法发送GET请求
$.get('服务器图片的URL', function(data) {
  // 创建一个img标签
  var img = new Image();
  // 设置img标签的src属性为获取到的数据
  img.src = data;
  // 将img标签添加到页面中，此时图片会被加载并显示
  $('body').append(img);
});

无论你选择使用哪种方法，都要确保服务器图片的URL是正确的，并且服务器允许跨域访问。