如何将API获取的图片展示在Material UI的Card组件中而非新开页面

云原生阿岚

2026-10-9

你只要把原来触发下载的逻辑替换为把生成的Blob临时URL存入组件状态，再绑定到Material UI的CardMedia组件上即可，完整实现如下：

实现步骤

新增React状态存储图片的临时访问URL
修改请求回调，移除下载触发逻辑，把生成的objectURL存入状态
用Material UI的Card+CardMedia组件绑定状态渲染图片
组件卸载/切换图片时释放临时URL避免内存泄漏

完整代码示例

首先导入依赖：

import { useState, useEffect } from 'react';
import { Card, CardMedia, CardContent, Typography } from '@mui/material';

组件实现代码：

const YourBusinessComponent = () => {
  // 存储图片临时URL的状态
  const [depositImageUrl, setDepositImageUrl] = useState(null);

  // 替换原来的下载点击处理函数
  const showDepositPictureHandler = (row) => {
    service.getDepositMoneyPictureById(row.id, (status, data) => {
      const blob = new Blob([data], { type: "image/png" });
      const objectUrl = URL.createObjectURL(blob);
      // 存入状态替代下载逻辑
      setDepositImageUrl(objectUrl);
    });
  };

  // 释放临时URL避免内存泄漏
  useEffect(() => {
    return () => {
      if (depositImageUrl) URL.revokeObjectURL(depositImageUrl);
    };
  }, [depositImageUrl]);

  return (
    <div>
      {/* 此处保留你原有的列表/触发按钮，点击时调用showDepositPictureHandler(row)即可 */}

      {/* 图片存在时渲染MUI Card组件 */}
      {depositImageUrl && (
        <Card sx={{ maxWidth: 600, margin: "16px 0" }}>
          <CardMedia
            component="img"
            image={depositImageUrl}
            alt="存款凭证"
          />
          <CardContent>
            <Typography variant="h6">存款凭证图片</Typography>
          </CardContent>
        </Card>
      )}
    </div>
  );
};