小程序如何调用服务器图片 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

小程序可以通过HTTP请求来调用服务器上的图片。以下是调用服务器图片的步骤：

在小程序的代码中，首先定义一个图片组件，例如<image>标签或<img>标签，用来展示服务器上的图片。
获取服务器图片的URL地址，通常这个URL地址是由服务器返回给小程序的，在小程序中进行网络请求后获取到。
利用小程序的网络请求API，比如wx.request方法来发送HTTP请求，并在请求成功后获取到图片数据。
将获取到的图片数据赋值给图片组件的src属性，来将服务器上的图片展示在小程序中。

以下是一个示例代码，展示了如何在小程序中调用服务器图片：

// 假设服务器图片的URL地址为http://example.com/image.jpg

// 在小程序页面中定义一个图片组件
<image src="{{imgUrl}}"></image>

// 在小程序的逻辑文件中，发送HTTP请求获取服务器图片
Page({
  data: {
    imgUrl: '' // 存储服务器图片URL的变量
  },
  onLoad: function() {
    var that = this;
    wx.request({
      url: 'http://example.com/image.jpg',
      method: 'GET',
      responseType: 'arraybuffer',
      success: function(res) {
        // 将获取到的图片数据转为base64编码，并赋值给图片组件的src属性
        var base64Data = wx.arrayBufferToBase64(res.data);
        that.setData({
          imgUrl: 'data:image/jpeg;base64,' + base64Data
        });
      }
    });
  }
});

以上代码中，通过wx.request方法发送GET请求获取服务器图片，并将返回的图片数据转为base64编码，最后将base64编码的图片数据赋值给图片组件的src属性，从而在小程序中展示服务器图片。

需要注意的是，服务器图片的URL地址需确保是公网可访问的，并且小程序需具有访问该URL地址的权限。同时，由于小程序对图片的大小有限制，如果服务器上的图片过大，可能会导致展示异常，因此需要根据实际情况进行适配。

1年前 0条评论

worktile

Worktile官方账号

调用服务器图片是小程序常用的功能之一，下面是一些实现该功能的方法：

使用wx.request()发起网络请求：通过使用wx.request()API，可以向服务器发送请求，获取服务器上的图片资源。具体步骤如下：

// 小程序代码
wx.request({
  url: 'http://www.example.com/image.jpg',  // 服务器上图片的URL
  responseType: 'arraybuffer',
  success: function (res) {
    // 将图片信息转换为Base64编码的字符串
    let base64Img = wx.arrayBufferToBase64(res.data);
    // 将Base64编码的图片字符串赋值给Image组件的src属性
    that.setData({
      imgUrl: 'data:image/jpg;base64,' + base64Img
    });
  }
});

使用组件显示图片：通过将获取到的服务器上的图片信息赋值给组件的src属性，即可在小程序中显示图片。具体步骤如下：

// 小程序代码
<image src="{{imgUrl}}" mode="aspectFit"></image>

缓存图片：为了减少网络请求，可以将获取到的服务器图片进行缓存，下次使用时从缓存中获取。具体步骤如下：

// 小程序代码
wx.request({
  url: 'http://www.example.com/image.jpg',
  responseType: 'arraybuffer',
  success: function (res) {
    // 将图片信息转换为Base64编码的字符串
    let base64Img = wx.arrayBufferToBase64(res.data);
    // 存储图片本地路径
    let filePath = wx.env.USER_DATA_PATH + '/image.jpg';
    wx.getFileSystemManager().writeFile({
      filePath: filePath,
      data: base64Img,
      encoding: 'base64',
      success: function () {
        // 将图片路径保存至缓存
        wx.setStorageSync('imagePath', filePath);
        // 将图片路径赋值给Image组件的src属性
        that.setData({
          imgUrl: filePath
        });
      }
    });
  }
});

使用wx.getImageInfo()获取图片信息：通过调用wx.getImageInfo()API，可以获取服务器图片的信息，包括宽度、高度等。具体步骤如下：

// 小程序代码
wx.request({
  url: 'http://www.example.com/image.jpg',
  responseType: 'arraybuffer',
  success: function (res) {
    let filePath = wx.env.USER_DATA_PATH + '/image.jpg';
    wx.getFileSystemManager().writeFile({
      filePath: filePath,
      data: res.data,
      success: function () {
        // 获取图片信息
        wx.getImageInfo({
          src: filePath,
          success: function (infoRes) {
            console.log(infoRes.width, infoRes.height);
          }
        });
      }
    });
  }
});

使用服务器域名，在小程序后台配置合法域名：为了能够正常获取服务器上的图片，需要在小程序的后台配置合法域名。具体步骤如下：

登录小程序后台，进入开发->开发设置->服务器域名；
在 "request 合法域名" 中添加服务器域名；
保存并生效配置。

以上是实现小程序调用服务器图片的一些方法，可以根据实际需求选择合适的方法进行开发。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

要让小程序能够调用服务器上的图片，需要通过网络请求的方式来获取图片的URL，并将该URL传递给小程序进行显示。下面是具体步骤：

服务器端设置：将图片存储在服务器上，并为每张图片生成一个唯一的URL。
小程序端网络请求：在小程序端使用wx.request()函数发送网络请求，获取图片的URL。
下载图片：使用小程序的wx.downloadFile()函数，将获取到的图片URL作为参数，下载图片到本地。
显示图片：通过<image>标签，在小程序的页面中展示下载的图片。

下面是具体的操作流程：

服务器端操作：

将图片存储在服务器的特定目录下，例如/images。
为每张图片生成一个唯一的URL，可以使用UUID等方式生成。
在服务器的后端代码中，添加一个API接口，用于将图片的URL返回给小程序。

小程序端操作：

在小程序的页面代码中，使用wx.request()函数发送网络请求，获取图片的URL。

wx.request({
  url: 'https://your-server.com/api/getImageUrl', // 服务器的API接口
  success: function(res) {
    // 获取到图片的URL
    var imageUrl = res.data.imageUrl;
    // 调用下载图片的函数
    downloadImage(imageUrl);
  }
});

创建一个下载图片的函数downloadImage()，函数内部使用wx.downloadFile()函数下载图片到本地。

function downloadImage(url) {
  wx.downloadFile({
    url: url,
    success: function(res) {
      // 下载成功后，获取图片的临时文件路径
      var tempFilePath = res.tempFilePath;
      // 将临时文件路径传递给页面的data对象中，以供页面使用
      that.setData({
        imagePath: tempFilePath
      });
    }
  });
}

在小程序的页面中，使用<image>标签来展示下载的图片。

<image src="{{imagePath}}"></image>

通过上述步骤，小程序就可以成功调用服务器上的图片并进行显示。

1年前 0条评论