前端展示Google Drive图片崩溃问题求助

核心问题定位 #

你的代码存在数据存储与映射的逻辑错误，这是页面崩溃的主要原因：

• 上传接口中，你将完整的图片访问链接（https://drive.google.com/uc?export=view&id=xxx）存入了Google Sheet的D列
• 数据获取接口中，你又把这个完整链接当作fileId再次拼接成新的imageUrl，最终得到嵌套的无效链接：https://drive.google.com/uc?export=view&id=https://drive.google.com/uc?export=view&id=xxx
• 无效链接请求返回的不是图片资源，而是错误页面或HTML内容，前端Image组件无法解析，直接引发崩溃

此外，前端缺少图片加载失败的错误处理机制，进一步加剧了崩溃问题。

分步修复方案 #

1. 修正上传接口：存储fileId而非完整链接 #

修改上传接口写入Sheet的逻辑，将imageUrl替换为fileId，确保Sheet中存储纯净的文件ID：

// 上传接口中替换写入Sheet的代码块
await sheets.spreadsheets.values.append({
  spreadsheetId: GOOGLE_SHEET_ID,
  range: "Sheet1!A:D",
  valueInputOption: "USER_ENTERED",
  requestBody: {
    // 没有文件时传空字符串，而非完整链接
    values: [[name, email, message, fileId || ""]],
  },
});

2. 修正数据获取接口：用fileId生成正确链接 #

现在Sheet中存储的是纯净fileId，保持现有映射逻辑即可生成正确链接：

// 数据获取接口中映射逻辑无需修改（row[3]已为正确fileId）
const data = rows.map((row) => ({
  name: row[0],
  email: row[1],
  message: row[2],
  fileId: row[3] || "",
  imageUrl: row[3]
    ? `https://drive.google.com/uc?export=view&id=${row[3]}`
    : null,
}));

3. 前端代码修复：使用正确链接并添加错误处理 #

修改前端代码，使用接口返回的imageUrl，同时添加加载失败处理避免页面崩溃：

export default function SubmissionsPage() {
  const [submissions, setSubmissions] = useState<Submission[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch("/api/get-submissions");
      const data = await res.json();
      setSubmissions(data);
    };
    fetchData();
  }, []);

  return (
    <Stack>
      {JSON.stringify(submissions)}
      {submissions.map((v, k) => (
        <Box key={k}>
          {/* 展示Google Drive图片，添加错误处理 */}
          {v.imageUrl && (
            <Image
              w={300}
              h={300}
              bg={"blue"}
              p={"lg"}
              src={v.imageUrl}
              alt={`${v.name}的上传图片`}
              onError={(e) => {
                // 加载失败时替换为本地占位图
                (e.target as HTMLImageElement).src = "/placeholder.png";
                // 也可选择隐藏图片：(e.target as HTMLImageElement).style.display = 'none'
              }}
            />
          )}
          <Image src={"/img.png"} alt="本地测试图" w={300} h={300} />
        </Box>
      ))}
    </Stack>
  );
}

4. 验证Google Drive权限与链接有效性 #

• 手动访问生成的imageUrl，确认能直接打开图片（而非跳转页面）
• 检查Google Drive父文件夹权限：确保文件夹本身没有访问限制（即使文件设为公开，父文件夹权限也可能影响访问）
• 若链接仍不稳定，可尝试使用另一种图片链接格式：https://lh3.googleusercontent.com/d/${fileId}=w300-h300（指定尺寸可避免重定向问题）

额外注意事项 #

• 上传文件后，权限设置可能存在延迟，可添加短暂等待或重试逻辑
• 生产环境建议避免直接暴露Google Drive的uc链接，可通过代理服务或CDN缓存优化加载体验

内容的提问来源于stack exchange，提问作者Bagas BIP