Typora+PicGo+GitHub实现图片上传及可能碰到的问题

喜欢ヅ旅行 2022-12-28 01:31 212阅读 0赞

### 文章目录 ###

*  前言
 *  一、如何解决md笔记图片不显示？
 *  二、Tyora+PicGo+GitHub（实现免费图片服务器）
 *   *  1.步骤一：创建GitHub账号和仓库
     *  2.PicGo的使用
     *  3.设置Typora
 *  三、图片上传可能遇到的一些问题
 *   *  遇到的问题一：上传失败
     *  遇到的问题二：图片上传成功但无法显示
 *  总结

--------------------

# 前言 #

在写md笔记的时候，我们经常会遇到把笔记发给别人或者换台电脑打开就不显示的问题，原因是Typora写的md文件中的图片都是另外存储的，不像word软件是存放到word文件里的。

--------------------

# 一、如何解决md笔记图片不显示？ #

解决办法：

1.  转成Word格式或者PDF格式之类的
2.  把图片和md文件一起打包，再进行分享
3.  全部图片上传到Github服务器上，直接发md文件，但朋友需要联网打开，才能看到图片。（此处需要用到图床工具PicGo）

# 二、Tyora+PicGo+GitHub（实现免费图片服务器） #

## 1.步骤一：创建GitHub账号和仓库 ##

1.  首先登陆 GitHub，新建一个仓库或者也可以使用一个已有仓库  
    ![在这里插入图片描述][20201213132852487.png]
2.  注意：仓库属性必须为公共（public）的，否则图片上传上去之后是没法显示滴～  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70]
3.  创建好后，需要在 GitHub 上生成一个 token 以便 PicGo 来操作我们的仓库，来到个人中心的Settings->Developer settings ->Personal access tokens，创建 token  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 1]
4.  点击 Generate new token 创建一个新 token，选择 repo，同时它会把包含其中的都会勾选上。点击绿色按钮，Generate token 。生成一个 token ，记得复制保存到其他地方，这个 token 只显示一次！！  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 2]

## 2.PicGo的使用 ##

1.  下载最新版的PicGo  
    [https://github.com/Molunerfinn/PicGo/releases][https_github.com_Molunerfinn_PicGo_releases]

注意：mac 系统选择 dmg 下载，windwos 选择 .exe系统，如果不是下载安装包，想看源码的话，可以命令行 git clone https://github.com/Molunerfinn/PicGo.git 克隆到本地  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 3]

1.  配置 PicGo  
    打开 PicGo 面板，  
    **仓库名格式为 用户名/仓库名**  
    **分支名：master**  
    **token：上一个咱们创建的token**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 4]

然后点击确定即可完成绑定，然后设置成默认图床

## 3.设置Typora ##

1.  打开Typora，选择文件->偏好设置->图像
2.  选择插入图片时上传图片，并配置PicGo的所在位置（默认为C:\\Users\\LZH\\AppData\\Local\\Programs\\PicGo）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 5]

设置完成后，可点击上传图片验证

# 三、图片上传可能遇到的一些问题 #

## 遇到的问题一：上传失败 ##

![在这里插入图片描述][20201213135300788.png]  
可能的原因及解决方法：

1.  图床设置的问题  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 6]  
    首先在确保你的GitHub图床设置路径准确无误的情况下：  
    ***(1).再次检查你的仓库名是否正确  
    (2).仓库名不能出现空格！！如果一定要有空格请用 - 来代替（因为GitHub中的空格默认换成-**）*  
    *(3).不要出现一些奇怪的符号！*
2.  图片已存在或存在该名字  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 7]  
    在图床工具中开启**时间戳重命名**或**上传前重命名**

## 遇到的问题二：图片上传成功但无法显示 ##

![在这里插入图片描述][20201213140152825.png]  
原因是github屏蔽掉了图片，解决办法就是修改host。  
路径：

C:\Windows\System32\drivers\etc\hosts

找到host文件，用记事本格式打开，添加代码

# GitHub Start 
    140.82.113.3      github.com
    140.82.114.20     gist.github.com
    151.101.184.133    assets-cdn.github.com
    151.101.184.133    raw.githubusercontent.com
    151.101.184.133    gist.githubusercontent.com
    151.101.184.133    cloud.githubusercontent.com
    151.101.184.133    camo.githubusercontent.com
    151.101.184.133    avatars0.githubusercontent.com
    199.232.68.133     avatars0.githubusercontent.com
    199.232.28.133     avatars1.githubusercontent.com
    151.101.184.133    avatars1.githubusercontent.com
    151.101.184.133    avatars2.githubusercontent.com
    199.232.28.133     avatars2.githubusercontent.com
    151.101.184.133    avatars3.githubusercontent.com
    199.232.68.133     avatars3.githubusercontent.com
    151.101.184.133    avatars4.githubusercontent.com
    199.232.68.133     avatars4.githubusercontent.com
    151.101.184.133    avatars5.githubusercontent.com
    199.232.68.133     avatars5.githubusercontent.com
    151.101.184.133    avatars6.githubusercontent.com
    199.232.68.133     avatars6.githubusercontent.com
    151.101.184.133    avatars7.githubusercontent.com
    199.232.68.133     avatars7.githubusercontent.com
    151.101.184.133    avatars8.githubusercontent.com
    199.232.68.133     avatars8.githubusercontent.com
    # GitHub End

保存重启一下Typora软件即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 8]

# 总结 #

我们在使用工具的时候总是会遇到大大小小的问题，这些问题是我碰到的，方法也是我参考了多位大佬的博客简书等总结出来的，如有冒犯到抱歉了。

[20201213132852487.png]: /images/20221120/89a8721c9d3049339b79a80eadd0750e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70]: /images/20221120/a0dd480239b94b5799bae76af4892d0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/dad2524f4e7240e1ba6b784951c6479b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201213133332983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ==,size_16,color_FFFFFF,t_70
[https_github.com_Molunerfinn_PicGo_releases]: https://github.com/Molunerfinn/PicGo/releases
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201213133619918.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201213133810671.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201213134825725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ==,size_16,color_FFFFFF,t_70
[20201213135300788.png]: https://img-blog.csdnimg.cn/20201213135300788.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201213135442507.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201213135907999.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ==,size_16,color_FFFFFF,t_70
[20201213140152825.png]: https://img-blog.csdnimg.cn/20201213140152825.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201213140419257.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjAyNTM3MQ==,size_16,color_FFFFFF,t_70