h5如何拿到服务器里面的图片

要拿到服务器中的图片需要通过HTTP协议进行请求和获取。下面是一个大致的流程：

1. 创建Ajax请求或使用Fetch API发起一个GET请求到服务器的指定接口。
2. 服务器接收到请求后，根据请求的接口进行处理，将图片文件的URL返回给前端。
3. 前端接收到URL后，可以通过创建一个img标签，设置其src属性为返回的URL，或者使用JavaScript创建一个Image对象，然后设置其src属性为URL。
4. 当图片加载完成后，可以通过JavaScript将图片显示在页面上。

以下是一个示例代码：

// 使用Ajax发起GET请求
const xhr = new XMLHttpRequest();
xhr.open('GET', '/get-image-url', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const imageURL = xhr.responseText;
    // 创建img标签并设置src属性
    const img = document.createElement('img');
    img.src = imageURL;
    document.body.appendChild(img);
  }
};
xhr.send();

// 或者使用Fetch API
fetch('/get-image-url')
  .then(response => response.text())
  .then(imageURL => {
    // 创建img标签并设置src属性
    const img = document.createElement('img');
    img.src = imageURL;
    document.body.appendChild(img);
  })
  .catch(error => {
    console.log(error);
  });

在上面的示例中，/get-image-url是服务器端提供的接口，用于返回图片文件的URL。可以根据实际情况，将接口地址替换成真正的服务器地址。

当图片加载完成后，可以通过JavaScript进行进一步的处理，比如设置图片的样式、添加事件监听等。

注意：为了确保能够顺利获取服务器中的图片，需要保证服务器端的接口能够正确返回图片文件的URL，并且服务器端应该配置正确的CORS（跨域资源共享）策略，以便前端能够正常获取图片。

要从服务器获取图片，可以使用Ajax或者Fetch API来实现。下面是具体的步骤：

步骤一：创建XMLHttpRequest对象
使用Ajax获取服务器中的图片之前，需要先创建一个XMLHttpRequest对象。可以使用以下代码创建：

var xhr = new XMLHttpRequest();

步骤二：设置请求的URL
将服务器中图片的URL作为参数传递给open()方法。例如：

xhr.open('GET', 'http://example.com/path/to/image.jpg', true);

步骤三：设置响应类型
使用responseType属性来指定响应的类型是blob类型，以便能够获取到图片的二进制数据。例如：

xhr.responseType = 'blob';

步骤四：发送请求
使用send()方法发送请求。例如：

xhr.send();

步骤五：处理响应
可以使用onload和onerror事件来处理响应。当请求成功完成时，可以通过response属性获取到服务器返回的图片数据。

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

xhr.onerror = function() {
    console.log('请求失败');
}

以上步骤可以让你使用Ajax从服务器获取到图片数据，并将其显示在页面上。

另外，使用Fetch API也可以实现同样的功能。以下是使用Fetch API获取服务器图片的示例代码：

fetch('http://example.com/path/to/image.jpg')
  .then(response => response.blob())
  .then(blob => {
    var img = document.createElement('img');
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  })
  .catch(error => {
    console.log('请求失败');
  });

这是基本的方法，前提是你有权限访问服务器上的图片资源。

获取服务器图片，可以通过以下步骤进行：

步骤1：建立服务器端API
首先，需要在服务器端建立一个API，用于提供图片的访问链接。这可以通过使用某种后端语言（如PHP、Python、Node.js等）来实现。API的作用是响应客户端的请求，并将所需的图片数据返回给客户端。

步骤2：发送请求并获取图片链接
在客户端的H5页面中，使用JavaScript代码发送HTTP请求，向服务器端的API发送请求，并获取到所需图片的链接。这可以通过使用XMLHttpRequest对象或Fetch API来实现。

步骤3：下载图片并展示
获得图片链接后，可以使用JavaScript代码将图片下载到客户端，并展示在H5页面上。这可以通过创建一个新的Image对象，设置其src属性为图片链接，从而实现图片的下载和展示。

步骤4：处理图片
如果需要对图片进行一些处理，例如修改尺寸、添加滤镜等，可以使用Canvas API对下载的图片进行操作。通过创建一个Canvas对象，将下载的图片绘制在Canvas上，然后进行相应的操作，最后将处理后的图片显示在H5页面上。

下面是一个示例代码，演示如何通过H5获取服务器图片并展示：

// 步骤2：发送请求并获取图片链接
fetch('http://example.com/api/getImageLink')
  .then(function(response) {
    return response.json(); // 将响应解析为JSON格式
  })
  .then(function(data) {
    var imageUrl = data.imageUrl; // 获取到图片链接

    // 步骤3：下载图片并展示
    var img = new Image();
    img.src = imageUrl;
    img.onload = function() {
      // 步骤4：处理图片
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      
      // 在H5页面上展示图片
      document.body.appendChild(canvas);
    };
  })
  .catch(function(error) {
    console.log('Error:', error);
  });

以上代码中，通过fetch函数发送GET请求获取到服务器返回的JSON数据，其中包含了图片的链接。然后，创建一个新的Image对象，并将下载的图片链接赋值给Image对象的src属性。在Image对象加载完成后，创建一个Canvas对象，并将下载的图片绘制在Canvas上，最后将Canvas添加到H5页面中以展示图片。