Skip to content

IMAGE_STORAGE_GUIDE.md

Latest commit

 

History

History
132 lines (97 loc) · 3.52 KB

IMAGE_STORAGE_GUIDE.md

File metadata and controls

132 lines (97 loc) · 3.52 KB

📸 图片存储解决方案指南

问题说明

当你在文章管理器中插入大图片时，可能会遇到以下错误：

Failed to execute 'setItem' on 'Storage': Setting the value of 'articles' exceeded the quota.

原因：

  • localStorage 存储限制通常为 5-10MB
  • 图片转换为 base64 编码后体积会增加约 33%
  • 3.74MB 的图片实际占用约 5MB 存储空间

✅ 已实现的自动优化

1. 自动图片压缩

  • 插入图片时自动检测大小
  • 超过 500KB 自动压缩
  • 压缩参数：最大宽度 1200px，质量 80%
  • 显示压缩前后的大小对比

2. 存储空间检查

  • 保存前自动检查空间是否足够
  • 显示详细的错误信息和建议
  • 控制台输出存储使用情况

3. 友好的提示

  • 图片过大时提示用户
  • 建议使用图床服务
  • 存储空间不足时显示警告

🎯 推荐解决方案

方案 1：使用免费图床服务（推荐）

Imgur（国际）

  1. 访问 https://imgur.com
  2. 点击 "New post" 上传图片
  3. 右键图片 → 复制图片地址
  4. 在编辑器中使用 URL 插入

SM.MS（国内）

  1. 访问 https://sm.ms
  2. 上传图片
  3. 复制图片链接
  4. 在编辑器中使用 URL 插入

路过图床

  1. 访问 https://imgse.com
  2. 上传图片
  3. 复制 Markdown 链接
  4. 在编辑器中使用

方案 2：使用 GitHub 作为图床

  1. 创建一个 GitHub 仓库（如 my-images）
  2. 上传图片到仓库
  3. 使用 jsDelivr CDN 加速： 
    https://cdn.jsdelivr.net/gh/用户名/仓库名@分支/图片路径

方案 3：压缩图片后再上传

使用在线工具压缩图片：

目标：将图片压缩到 200KB 以下

📊 存储空间监控

打开浏览器控制台（F12），查看存储使用情况：

=== 存储空间使用情况 ===
总使用：3.45 MB
文章数据：3.20 MB
使用率：69.0%

当使用率超过 70% 时，页面会自动显示警告。

🔧 使用技巧

1. 插入图片的最佳实践

  • ✅ 使用图床 URL（推荐）
  • ✅ 压缩后再上传（< 200KB）
  • ❌ 直接插入大图片（> 1MB）

2. 如何在编辑器中插入图床图片

  1. 点击编辑器工具栏的图片按钮
  2. 选择图片文件（会自动压缩）
  3. 或者直接粘贴图床 URL

3. 清理存储空间

如果存储空间不足：

  1. 删除不需要的旧文章
  2. 将文章中的 base64 图片替换为图床链接
  3. 导出文章备份后清空 localStorage

💡 常见问题

Q: 为什么我的图片自动被压缩了？

A: 为了节省存储空间，系统会自动压缩超过 500KB 的图片。压缩不会明显影响视觉质量。

Q: 如何避免图片被压缩？

A: 使用图床服务上传图片，然后插入 URL 链接，这样图片不会存储在 localStorage 中。

Q: 已经保存的文章如何优化？

A: 编辑文章，将 base64 图片替换为图床链接，然后重新保存。

Q: 推荐的图片尺寸是多少？

A:

  • 封面图片：1200x630px
  • 文章配图：最大宽度 1200px
  • 文件大小：< 200KB

🚀 最佳实践总结

  1. 优先使用图床服务 - 避免 localStorage 限制
  2. 压缩图片 - 使用在线工具或系统自动压缩
  3. 定期清理 - 删除不需要的文章和图片
  4. 监控存储 - 注意存储空间警告
  5. 备份数据 - 定期导出文章备份

💡 提示： 如果你经常需要插入大量图片，强烈建议使用图床服务！