uniapp从服务器端获取图片并显示

UniApp 是一款基于 Vue.js 的跨平台应用开发框架，它支持快速构建原生应用。从服务器端获取图片并在 UniApp 中显示，你可以按照以下步骤操作：

1. **设置请求头**: 首先需要通过 `axios` 或者 UniApp 提供的 `request` API 发起 HTTP 请求，设置 `Content-Type` 为 `image/*` 来告诉服务器返回的是图片数据。

import axios from '@dcloudio/axios';

async function getImageFromServer(url) {
  const response = await axios.get(url, {
    headers: { 'Content-Type': 'image/*' }
  });
  return response.data;
}

2. **处理响应**: 获取到服务器的响应后，通常是一个 `Blob` 对象或者一个包含 Base64 编码的字符串，你可以选择合适的方式将其转换成可以展示的图片格式。

- 如果是 Blob 对象，可以使用 `uni.getImageInfo` 函数转成 ImageSource：

     let blob = await getImageFromServer(url);
     let source = await uni.getImageInfo({ src: URL.createObjectURL(blob) });
     this.imgSrc = source.path; // 使用在组件中显示

- 如果是 Base64 字符串，可以创建 `img` 标签直接设置 `src` 属性：

     let base64Image = 'data:image/jpeg;base64,' + await getImageFromServer(url).data;
     this.imgSrc = base64Image;
     `<img :src="imgSrc" />`

3. **添加图片到页面**: 将获取到的图片源插入到需要显示图片的标签（如 `img`）中。

<template>
  <view>
    <img :src="imgSrc" />
  </view>
</template>

<script setup>
import { ref } from 'vue';
const imgSrc = ref('');
// ... 在适当的地方调用 getImageFromServer 并更新 imgSrc
</script>