解决导入markdown时本地图片无法显示问题——图床

图床工具: PicGo

图片服务器:Gitee

辅助工具:Node.js 14.17.6

图床:

一般是指储存图片的服务器,有国内和国外之分。国外的图床由于有空间距离等因素决定了访问速度很慢,影响图片显示速度。国内也分为单线空间、多线空间和cdn加速三种。

图片服务器可选七牛云, 阿里云 OSS , gitee ,其中 gitee 给了 5 个 G 的空间,而且网络也快。


1、安装 PicGo

先下载 PicoGo ,下载地址:https://github.com/Molunerfinn/PicGo/releases

借此机会了解一下下载软件的各版本的区别:

  • .yml:YAML (YAML Ain’t a Markup Language 即 YAML不是一种标记语言)

    YAML 是一个可读性高,用来表达资料序列的编程语言,专门用来写配置文件,文件通常以 .yml 为后缀。

    在开发这种语言时,YAML 的意思其实是:“Yet Another Markup Language”(仍是一种置标语言),但为了强调这种语言以数据做为中心,而不是以置标语言为重点,而用返璞词重新命名。

  • .AppImage:AppImage 是一个压缩的镜像文件,它包含所有运行所需要的依赖和库文件。

    可以直接执行 AppImage 文件不需要安装。当你把 AppImage 文件删除,整个软件也被删除了。你可以把它当成 windows 系统中的那些免安装的 exe 文件,在 linux 系统中使用 AppImage 软件是极好的。

  • .dmg:苹果电脑的镜像安装文件。

  • .blockmap:基于分配块的位图索引,每个文件的分配块都有一个索引与之对应,是一对一的索引关系。

    是文件系统的文件索引模式。(隐隐感觉这个解释有点不对劲,但实在找不到什么资料)

  • -ia32:Intel Architecture 32bit 简称,即英特尔32位体系架构。

  • -x86:X86-64 就是 IA32 的 64 位拓展。

  • .snap:Snap 的安装包扩展名是 .snap。

    snap 是一种全新的软件包管理方式,它类似一个容器拥有一个应用程序所有的文件和库,各个应用程序之间完全独立。所以使用 snap 包的好处就是它解决了应用程序之间的依赖问题,使应用程序之间更容易管理。但是由此带来的问题就是它会占用更多的磁盘空间。

总之,下载 PicGo-Setup-2.3.0-beta.8-x64.exe 就对了,下载好直接安装即可,安装好打开如下:

2、安装 Gitee 插件

首先安装 Node.js

脚本语言需要一个解析器才能运行,JavaScript 是脚本语言,在不同的位置有不一样的解析器,如写入 html 的 js 语言,浏览器是它的解析器角色。而对于需要独立运行的 JS,node.js 就是一个解析器。

Node.js是一个免费的,开源的,跨平台的JavaScript运行时环境,使开发人员可以在浏览器外部编写命令行工具和服务器端脚本。

下载地址:https://nodejs.org/en/

下载好后一路 next 即可安装,需要注意在这一步时添加环境变量。

检测是否安装成功,输入“node --version” 检查 Node.js 版本,输入“npm --version” 检查 npm 版本

新版的 node.js 已经集成了 npm,所以可以看到 npm 也一并安装好了。

npm 是一个包管理工具,就像 pip 是 python 的包管理工具,npm 则是 javascript 的一个包管理工具。

在插件设置中搜素gitee, 注: gitee-uploader插件,必须先安装node.js

3. 创建图片服务器

在 gitee 创建一个公共仓库

然后生成一个私钥(token,下文配置用到),在 gitee 的个人设置里,找到左面安全设置的私人令牌,只勾 projects 这一项然后确认即可,生成后复制密钥留着。

4、配置PicGo

选择图床设置,第一步中安装 gitee 插件后,若是在图床设置找不到 gitee 图床,重启一下.

repo:用户名/仓库名称,也可以直接复制仓库的url;

branch:分支,默认master即可;

token:填入上文所生成的私人令牌即可;

path:路径,一般写上img;

customPath:提交消息,这一项和下一项customURL都不用填。在提交到码云后,会显示提交消息,插件默认提交的是 Upload 图片名 by picGo - 时间。

5、配置Typora 与 PicGo的关联

注意 PicGo 路径要到 PicGo.exe 才行。

最后点击验证图片上传选项,报错了。

解决方法:项目名不对,以gitee项目里面“管理”页签的为准,不以前台大标题为准。

修改后就成功了!

至此,直接复制图片于Typora里,会自动上传到自己配置的gitee图床的。

此外注意:

Typora 使用下面这个 url 跟 PicGo 连接的,所以 PicGo 的设置也要对应,默认一般就是。

using http://127.0.0.1:36677/upload

但 PicGo 的 Server 监听端口会经常变动(比如电脑重启后),就需要修改,不然 Typora 图片也会上传失败,因为 Typora 默认端口为 36677, 所以上传失败的时候可以检查一下 PicGo 的 Server 的监听端口是否变动, 一定得是 36677 。


今日份typora使用心得:

无序列表缩进时【Tab】+【Shift】,删除前方序号时直接删除键。


学习中用到的博客:

图床搭建:https://blog.csdn.net/weixin_41272626/article/details/109017685

安装及介绍 Node.js:https://blog.csdn.net/muzidigbig/article/details/80493880

解决导入markdown时本地图片无法显示问题——图床相关推荐

  1. Gitee+typora+picgo+插件,markdown图床配置,一键将markdown中本地图片上传至图床

    一键将markdown中本地图片上传至图床 推荐配置:Gitee+typora+picgo+插件 文章目录 安装 picgo 配置 typora 配置 Gitee 图床 配置图床设置 配置 typor ...

  2. hexo+markdown添加本地图片无法显示

    这个的话就要说一下hexo所支持的markdown和其他一些markdown语法稍微有点不同造成的. 比如我在写一篇文章时它的名字叫"  R语言绘制个性化词云 ",这个时候它会自动 ...

  3. 使用Picgo自动上传本地图片教程(typora+gitee图床)

    使用Picgo自动上传本地图片教程(typora) 注意! : 2022/3/25日起gitee不能用于图床了 gitee加了防盗链,所有图片的都访问不了了!!! 大家请选择其他的图床存放图片!!! ...

  4. 微信小程序——如何解决本地图片不显示的问题

    解决微信小程序本地图片不显示的问题 这篇记录的是小涂踩的小程序的一个坑:本地图片真机显示不出来! 问题发现 开发小程序过程中,模拟器上显示一些本地的图标照片(.jpg \ .png -)模拟器上可以清 ...

  5. 解决MarkDown上传本地图片无法显示

    解决MarkDown上传本地图片无法显示 前言 提示:什么牛头马面写的代码,今天写个技术博客想插入一张图片发现无法显示,接着按流程在博客一顿找,发现我开头第一句,不知道怎么形容垃圾场里面找垃圾的心情. ...

  6. 有道云笔记中markdown插入本地图片(绝对路径)后无法显示图片问题

    有道云笔记中markdown插入本地图片(绝对路径)后无法显示图片问题解决 环境: win10系统 有道云笔记 markdown bmp格式截图文件 在查看graphframe的jar包结构时,记录下 ...

  7. 解决md文件中本地图片链接失效的方法

    #markdown# #typora# 使用typora进行markdown创作时,可以将图片的路径改为相对路径,这样就能解决移动md文件时本地图片的失效问题了. 具体操作是:点击[文件]→[偏好设置 ...

  8. vue使用v-for遍历本地图片不显示

    vue使用v-for遍历本地图片不显示的问题 1.项目中本地有一组图片需要循环遍历展示,在使用v-for遍历之后发现无法展示图片,解决方法如下. 2.首先,正常的图片路径如下,但是想要展示不能按正常的 ...

  9. 解决PHP使用MPDF,图片不显示。

    解决PHP使用MPDF,图片不显示问题. 1. MPDF使用: 简单介绍:使用composer 安装 在composer.json文件中,加上"mpdf/mpdf": " ...

最新文章

  1. 用split分割文件和数据(笔记)
  2. Linux permission denied解决方法
  3. 精密空调机组及零部件相关专业术语
  4. 升级到Windows 8.1
  5. RTMP之后,SRT与QUIC
  6. mysql sohu_【MySQL中间件之SOHU-DBProxy】
  7. 别用Excel做数据可视化了!这款报表工具不比它香100倍?
  8. Qt杂记-QQuick之Android隐藏状态栏以及状态栏透明(QQuick项目)
  9. 匹配率 php,PHP 正则后瞻 超强匹配是否是域名,准确率99%
  10. 机器学习基础算法21-多输出的决策树回归
  11. 哈工大深圳计算机自动化专业,专业介绍———自动化专业知多少
  12. 制作一个免费的Wi-Fi二维码原来这么简单
  13. 用excel打开txt文件
  14. 开机出现invalid boot.ini filebooting from c:\windows\ntdetect failed 修复方法
  15. 【洛谷】P3957 [NOIP2017 普及组] 跳房子
  16. Java求一元二次方程的根
  17. 傅里叶变换的相关公式
  18. uni-app - uni.request 网络请求超时时间配置(全局超时时间配置)
  19. 老调重弹之ffmpeg视频时间同步
  20. 权责发生制与收付实现制在企业与事业单位会计处理的比较

热门文章

  1. [oeasy]python0143_主控程序_main
  2. 央行简历计算机水平怎么写,2020人民银行招聘简历模板及网申指导
  3. 【聯強EMBA】「本能叛逆」與「理性叛逆」
  4. Arduino和LM393传感器的移动机器人的速度、距离和角度测量
  5. 如何给img标签里的请求添加自定义header
  6. 国密是什么意思?属于商密还是普密?
  7. SpringBoot Elasticsearch
  8. wpa_cli 操作指令使用指南
  9. 分割含有中英文的字符串
  10. Android 9.0 在init.rc中启动一个服务