js如何调用服务器图片

在JavaScript中，可以通过以下几种方式调用服务器图片：

1. 使用HTML的img标签：最常见的方式是使用HTML的img标签，在src属性中指定图片的URL，浏览器会自动加载并显示图片。例如：

<img src="http://example.com/images/image.jpg" alt="图片">

2. 使用JavaScript的XMLHttpRequest对象：可以使用XMLHttpRequest对象向服务器发送HTTP请求，然后获取到图片的二进制数据。接着可以通过创建URL对象和Blob对象来生成图片的URL，最后将该URL赋值给img标签的src属性来显示图片。例如：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/images/image.jpg", true);
xhr.responseType = "arraybuffer";

xhr.onload = function() {
  if (xhr.status === 200) {
    var arrayBufferView = new Uint8Array(xhr.response);
    var blob = new Blob([arrayBufferView], { type: "image/jpeg" });
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL(blob);

    var img = document.createElement("img");
    img.src = imageUrl;

    document.body.appendChild(img);
  }
};

xhr.send();

3. 使用JavaScript的fetch API：fetch API是一种现代的网络请求标准，可以用来获取服务器的资源。类似于XMLHttpRequest对象，可以通过fetch API请求服务器图片，并通过Blob对象和URL对象来获取图片的URL，然后将该URL赋值给img标签的src属性。例如：

fetch("http://example.com/images/image.jpg")
  .then(function(response) {
    return response.blob();
  })
  .then(function(blob) {
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL(blob);

    var img = document.createElement("img");
    img.src = imageUrl;

    document.body.appendChild(img);
  });

无论使用哪种方式，需要确保服务器上的图片路径是正确的，并且有正确的访问权限。另外，建议使用异步加载图片的方式，以避免阻塞页面加载。

在JavaScript中调用服务器上的图片有几种方法，可以根据具体的需求选择适合的方式。以下是几种常见的方法：

1. 使用HTML标签：可以直接使用HTML的<img>标签来显示服务器上的图片。设置src属性为图片的URL即可。例如：

<img src="http://example.com/images/image.jpg" alt="图片">

2. 使用JavaScript的new Image()对象：可以使用JavaScript的new Image()对象来动态创建一个图片对象，并设置其src属性为图片的URL。然后可以将这个图片对象插入到HTML中的某个元素中。例如：

var image = new Image();
image.src = "http://example.com/images/image.jpg";
document.getElementById("imageContainer").appendChild(image);

3. 使用Ajax请求：可以使用Ajax来请求服务器上的图片，并在成功获取到图片后将其显示在页面上。需要使用XMLHttpRequest或者jQuery等库来发送Ajax请求。例如：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/images/image.jpg", true);
xhr.responseType = "blob";
xhr.onload = function() {
  if (xhr.status === 200) {
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL(xhr.response);
    var image = document.createElement("img");
    image.src = imageUrl;
    document.getElementById("imageContainer").appendChild(image);
  }
};
xhr.send();

4. 使用Fetch API：可以使用Fetch API来发送请求并获取图片，然后将其显示在页面上。使用Fetch API相对于传统的Ajax请求更加简洁。例如：

fetch("http://example.com/images/image.jpg")
  .then(function(response) {
    if (response.ok) {
      return response.blob();
    }
    throw new Error("Network response was not ok.");
  })
  .then(function(blob) {
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL(blob);
    var image = document.createElement("img");
    image.src = imageUrl;
    document.getElementById("imageContainer").appendChild(image);
  })
  .catch(function(error) {
    console.log("There has been a problem with your fetch operation: ", error.message);
  });

5. 使用第三方库：还可以使用一些第三方库来简化图片的加载过程，例如jQuery、React等。这些库提供了更高级的API和功能，可以更方便地处理图片加载和显示。

无论采用哪种方式，都需要注意跨域问题，确保客户端可以正常访问到服务器上的图片。

要在JavaScript中调用服务器上的图片，可以使用以下方法：

1. 使用HTML的标签：可以在HTML文件中使用标签来加载服务器上的图片。例如：

<img src="http://example.com/image.jpg" alt="Server Image">

在上面的例子中，将图像的URL指定为服务器上图像的完整URL。在浏览器加载HTML时，它将自动加载和显示图像。

2. 使用JavaScript旧的XMLHttpRequest对象（XHR）：可以使用XMLHttpRequest对象发送GET请求以获取服务器上的图像，并将其显示为图像标签的源。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/image.jpg', true);
xhr.responseType = 'blob';

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

xhr.send();

在上面的代码中，我们首先创建了一个XMLHttpRequest对象，并使用GET方法打开与服务器的连接。我们还将responseType属性设置为'blob'，以便将响应作为Blob对象返回。

然后，我们在xhr.onload事件处理程序中，检查响应的状态是否为200（即成功响应），然后创建一个元素，并将其源设置为从Blob对象创建的URL。最后，将图像添加到文档的主体中。

3. 使用JavaScript新的Fetch API：Fetch API是一种现代的JavaScript API，可以从服务器获取资源。使用fetch方法，可以获取图像并将其显示为图像标签的源。

fetch('http://example.com/image.jpg')
  .then(function(response) {
    return response.blob();
  })
  .then(function(blob) {
    var img = document.createElement('img');
    img.src = window.URL.createObjectURL(blob);
    document.body.appendChild(img);
  });

在上面的代码中，我们使用fetch方法发送GET请求以获取图像。然后，我们将响应转换为Blob对象，并在blob.then回调中创建一个元素，并将其源设置为从Blob对象创建的URL。最后，将图像添加到文档的主体中。

以上是三种在JavaScript中调用服务器上的图片的方法。具体选择哪种方法取决于你的需求和使用的环境。