(标签-ui|关键词-app)

Question

在nuiapp能查询到的图片数据但是不能显示出来，直接帮忙远程看看是什么问题。（查询到的是存库存二进制数据图片，不是图片链接）

1、uniapp前端查询图片代码

    <image :src="imageSrc" mode="widthFix" v-if="imageUrl"></image>

getImage(imageId) {
      try{
     uni.request({
       url: `http://localhost:21371/api/Images/getImage/${imageId}`, // 替换为实际的服务器地址
       method: 'GET',
       success: (res) => {
         if (res.statusCode === 200) {
           const blob = new Blob([res.data], { type: 'image/jpeg' });
                   const imageUrl = URL.createObjectURL(blob);
           this.displayImage(imageUrl);
 uni.showToast({
             title: '获取图片成功3',
             icon: 'none'
           });
         }
          else {
           uni.showToast({
             title: '获取图片失败',
             icon: 'none'
           });
         }
       },
       fail: (err) => {
         uni.showToast({
           title: '网络请求失败',
           icon: 'none'
         });
       }
     });
    } catch (error) {
        uni.showToast({ title: '获取图片失败1', icon: 'none' });
      }
    },

2、后端在数据库查询二进制图片数据

        [HttpGet("getImage/{imageId}")]
        public IActionResult GetImage(int imageId)
        {
            // 从数据库查询图片数据
            byte[] imageData = null;
            using (var connection = new SqlConnection(sqlcon))
            {
                connection.Open();
                using (var command = new SqlCommand("SELECT ImageData FROM Images WHERE ImageId = @ImageId", connection))
                {
                    command.Parameters.AddWithValue("@ImageId", imageId);
                    using (var reader = command.ExecuteReader())
                    {
                        if (reader.Read())
                        {
                            imageData = (byte[])reader["ImageData"];
                        }
                    }
                }
            }

            if (imageData == null)
            {
                return NotFound();
            }

            // 将图片数据转换为图片并返回
            return File(imageData, "image/jpeg");
        }

Answer 1

🕗晚上好，题主！目前：🟢[在线]
📢参考通义千问、由郭老师整理提供！
📣今日诗号：愿我如星君如月，夜夜流光相皎洁。

Uniapp 显示数据库二进制图片解决方案

您遇到的问题是在 Uniapp 中无法显示从后端数据库获取的二进制图片数据。 您的代码逻辑基本正确，只是在处理 Blob 对象和图片类型上可能存在一些问题。

以下是一个完整的解决方案，包括前端和后端代码示例，以及可能遇到的问题和解决方法：

1. 前端 (Uniapp) 代码：

<template>
  <view>
    <image :src="imageSrc" mode="widthFix" v-if="imageSrc"></image>
    <button @click="getImage(imageId)">加载图片</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageId: 1, // 需要替换为实际的图片 ID
      imageSrc: null,
    };
  },
  methods: {
    getImage(imageId) {
      uni.request({
        url: `http://localhost:21371/api/Images/getImage/${imageId}`, 
        method: 'GET',
        responseType: 'arraybuffer', // 关键：设置响应类型为 arraybuffer
        success: (res) => {
          if (res.statusCode === 200) {
            this.imageSrc =  'data:image/jpeg;base64,' + uni.arrayBufferToBase64(res.data);
          } else {
            uni.showToast({
              title: '获取图片失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

2. 后端 (ASP.NET Core) 代码:

[HttpGet("getImage/{imageId}")]
public IActionResult GetImage(int imageId)
{
    // 从数据库查询图片数据
    byte[] imageData = null;
    using (var connection = new SqlConnection(sqlcon))
    {
        connection.Open();
        using (var command = new SqlCommand("SELECT ImageData FROM Images WHERE ImageId = @ImageId", connection))
        {
            command.Parameters.AddWithValue("@ImageId", imageId);
            using (var reader = command.ExecuteReader())
            {
                if (reader.Read())
                {
                    imageData = (byte[])reader["ImageData"];
                }
            }
        }
    }

    if (imageData == null)
    {
        return NotFound();
    }

    // 返回图片数据
    return File(imageData, "image/jpeg"); 
}

关键点和问题解决：

• 响应类型设置: 前端请求时，需要将 responseType 设置为 'arraybuffer'，以便正确接收二进制数据。
• 图片数据转换: 后端返回的二进制数据需要在前端转换成 Base64 字符串，然后拼接成 data URL 格式才能在 <image> 标签中显示。
• 图片类型确认: 确保数据库中存储的图片类型与后端代码中设置的 Content-Type 一致，例如 "image/jpeg"， "image/png" 等。
• 跨域问题: 如果前端和后端不在同一个域名下，需要在后端设置 CORS 策略允许跨域请求。

其他建议:

• 可以使用 uni.showLoading() 和 uni.hideLoading() 显示和隐藏加载动画，提升用户体验。
• 可以使用 v-if 或 v-show 控制图片的显示，避免图片加载失败时出现空白。
• 建议对图片进行压缩处理，减小图片体积，提高加载速度。

希望以上解决方案能够帮助您解决 Uniapp 显示数据库二进制图片的问题。 如果还有其他问题，请随时提出。