图床 on 夜云泊 https://lifeislife.cn/tags/%E5%9B%BE%E5%BA%8A/ feedId:57980998056508425+userId:73222296380546048 Recent content in 图床 on 夜云泊 Hugo -- 0.160.1 zh Sat, 09 Apr 2022 16:43:08 +0000 替换 Gitee 图床为腾讯云 COS https://lifeislife.cn/posts/%E6%9B%BF%E6%8D%A2gitee%E5%9B%BE%E5%BA%8A%E4%B8%BA%E8%85%BE%E8%AE%AF%E4%BA%91cos/ Sat, 09 Apr 2022 16:43:08 +0000 https://lifeislife.cn/posts/%E6%9B%BF%E6%8D%A2gitee%E5%9B%BE%E5%BA%8A%E4%B8%BA%E8%85%BE%E8%AE%AF%E4%BA%91cos/ <p><a href="https://cloud.tencent.com/developer/article/1964208">Gitee 图床挂了</a>，但是各大云服务厂商提供的对象存储服务免费额度，对于个人小博客来说也够用了。下面介绍如何将图床更换为腾讯云 COS。</p> <h2 id="下载原有图片">下载原有图片</h2> <p>从<code>gitee</code>下载整个仓库。保持原有目录结构。</p> <h2 id="配置腾讯云-cos">配置腾讯云 COS</h2> <p>注册腾讯云账号，创建 COS 存储桶，选择公有读私有写。创建 COS 存储桶地址：<a href="https://console.cloud.tencent.com/cos">https://console.cloud.tencent.com/cos</a>，创建存储桶后可以在存储桶里打开防盗链设置。</p> <p>创建桶&ndash;选择地域&ndash;填写名称&ndash;选择公有读私有写&ndash;点击创建。</p> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image</title> <style> .post-img-view { text-align: center; } .responsive-image { display: block; margin: 0 auto; } </style> </head> <body> <div class="post-img-view"> <a data-fancybox="gallery" href="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091731554.png"> <img class="responsive-image" src="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091731554.png" alt="" style="margin: 0 auto;"/> </a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var images = document.querySelectorAll(".responsive-image"); var maxHeight = window.innerHeight / 3; images.forEach(function(image) { image.style.maxHeight = maxHeight + "px"; }); }); </script> </body> </html></p> <p>如果忘了设置读写权限可以按一下方法设置； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image</title> <style> .post-img-view { text-align: center; } .responsive-image { display: block; margin: 0 auto; } </style> </head> <body> <div class="post-img-view"> <a data-fancybox="gallery" href="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091727355.png"> <img class="responsive-image" src="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091727355.png" alt="" style="margin: 0 auto;"/> </a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var images = document.querySelectorAll(".responsive-image"); var maxHeight = window.innerHeight / 3; images.forEach(function(image) { image.style.maxHeight = maxHeight + "px"; }); }); </script> </body> </html></p> <p>选择<strong>菜单</strong>&ndash;<strong>文件列表</strong>。上传下载好的文件夹（整个仓库的文件夹）。鼠标放到<strong>选择文件</strong>出现<strong>上传文件夹选项</strong>，或者将文件夹<strong>拖入浏览器</strong>。</p> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image</title> <style> .post-img-view { text-align: center; } .responsive-image { display: block; margin: 0 auto; } </style> </head> <body> <div class="post-img-view"> <a data-fancybox="gallery" href="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091727353.png"> <img class="responsive-image" src="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091727353.png" alt="" style="margin: 0 auto;"/> </a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var images = document.querySelectorAll(".responsive-image"); var maxHeight = window.innerHeight / 3; images.forEach(function(image) { image.style.maxHeight = maxHeight + "px"; }); }); </script> </body> </html></p> <h2 id="配置-picgo">配置 Picgo</h2> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image</title> <style> .post-img-view { text-align: center; } .responsive-image { display: block; margin: 0 auto; } </style> </head> <body> <div class="post-img-view"> <a data-fancybox="gallery" href="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091727351.png"> <img class="responsive-image" src="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091727351.png" alt="" style="margin: 0 auto;"/> </a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var images = document.querySelectorAll(".responsive-image"); var maxHeight = window.innerHeight / 3; images.forEach(function(image) { image.style.maxHeight = maxHeight + "px"; }); }); </script> </body> </html></p> <p><strong>COS 版本</strong>：V5 <strong>设定 Secreid，设定 Secrekey，设定 APPID：</strong> APPID、SecretID 与 SecretKey <a href="https://console.cloud.tencent.com/cam/capi">点此直达获取</a>。 选择继续使用&ndash;创建秘钥。</p> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image</title> <style> .post-img-view { text-align: center; } .responsive-image { display: block; margin: 0 auto; } </style> </head> <body> <div class="post-img-view"> <a data-fancybox="gallery" href="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/202204091715578.png"> <img class="responsive-image" src="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/202204091715578.png" alt="" style="margin: 0 auto;"/> </a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var images = document.querySelectorAll(".responsive-image"); var maxHeight = window.innerHeight / 3; images.forEach(function(image) { image.style.maxHeight = maxHeight + "px"; }); }); </script> </body> </html></p> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image</title> <style> .post-img-view { text-align: center; } .responsive-image { display: block; margin: 0 auto; } </style> </head> <body> <div class="post-img-view"> <a data-fancybox="gallery" href="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091727352.png"> <img class="responsive-image" src="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091727352.png" alt="" style="margin: 0 auto;"/> </a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var images = document.querySelectorAll(".responsive-image"); var maxHeight = window.innerHeight / 3; images.forEach(function(image) { image.style.maxHeight = maxHeight + "px"; }); }); </script> </body> </html></p> <p><strong>设定存储空间名，设定存储区域：</strong> <a href="https://console.cloud.tencent.com/cos/bucket">点此获取存储空间名以及存储区域</a>。桶名称即存储空间名，所属区域：<code>ap-shanghai</code>即确认存储区域。</p> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image</title> <style> .post-img-view { text-align: center; } .responsive-image { display: block; margin: 0 auto; } </style> </head> <body> <div class="post-img-view"> <a data-fancybox="gallery" href="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091727354.png"> <img class="responsive-image" src="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091727354.png" alt="" style="margin: 0 auto;"/> </a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var images = document.querySelectorAll(".responsive-image"); var maxHeight = window.innerHeight / 3; images.forEach(function(image) { image.style.maxHeight = maxHeight + "px"; }); }); </script> </body> </html></p> <p><strong>指定存储区域：</strong> 指定上传到 COS 的目录，比如我原先从<code>gitee</code>下载来的图床的仓库名是<code>markdown_picbed</code>，图片又保存在<code>markdown_picbed/img</code>目录下，那么就指定<code>markdown_picbed/img</code>目录。</p> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image</title> <style> .post-img-view { text-align: center; } .responsive-image { display: block; margin: 0 auto; } </style> </head> <body> <div class="post-img-view"> <a data-fancybox="gallery" href="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091722487.png"> <img class="responsive-image" src="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091722487.png" alt="" style="margin: 0 auto;"/> </a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var images = document.querySelectorAll(".responsive-image"); var maxHeight = window.innerHeight / 3; images.forEach(function(image) { image.style.maxHeight = maxHeight + "px"; }); }); </script> </body> </html></p> <h2 id="替换旧图床-url">替换旧图床 URL</h2> <p>VSCode 全局替换：</p> <p> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Image</title> <style> .post-img-view { text-align: center; } .responsive-image { display: block; margin: 0 auto; } </style> </head> <body> <div class="post-img-view"> <a data-fancybox="gallery" href="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091753809.png"> <img class="responsive-image" src="https://picbed-1311007548.cos.ap-shanghai.myqcloud.com/markdown_picbed/img/202204091753809.png" alt="" style="margin: 0 auto;"/> </a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var images = document.querySelectorAll(".responsive-image"); var maxHeight = window.innerHeight / 3; images.forEach(function(image) { image.style.maxHeight = maxHeight + "px"; }); }); </script> </body> </html></p> Gitee 图床挂了，但是各大云服务厂商提供的对象存储服务免费额度，对于个人小博客来说也够用了。下面介绍如何将图床更换为腾讯云 COS。

下载原有图片

从gitee下载整个仓库。保持原有目录结构。

配置腾讯云 COS

注册腾讯云账号，创建 COS 存储桶，选择公有读私有写。创建 COS 存储桶地址：https://console.cloud.tencent.com/cos，创建存储桶后可以在存储桶里打开防盗链设置。

创建桶–选择地域–填写名称–选择公有读私有写–点击创建。

Responsive Image

如果忘了设置读写权限可以按一下方法设置； Responsive Image

选择菜单–文件列表。上传下载好的文件夹（整个仓库的文件夹）。鼠标放到选择文件出现上传文件夹选项，或者将文件夹拖入浏览器。

Responsive Image

配置 Picgo

Responsive Image

COS 版本：V5 设定 Secreid，设定 Secrekey，设定 APPID： APPID、SecretID 与 SecretKey 点此直达获取。 选择继续使用–创建秘钥。

Responsive Image

Responsive Image

设定存储空间名，设定存储区域： 点此获取存储空间名以及存储区域。桶名称即存储空间名，所属区域：ap-shanghai即确认存储区域。

Responsive Image

指定存储区域： 指定上传到 COS 的目录，比如我原先从gitee下载来的图床的仓库名是markdown_picbed，图片又保存在markdown_picbed/img目录下，那么就指定markdown_picbed/img目录。

Responsive Image

替换旧图床 URL

VSCode 全局替换：

Responsive Image

]]>