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

本文详细指导如何使用PicGo与Gitee图床解决Markdown本地图片上传和显示问题,包括安装步骤、Gitee插件配置、图片服务器创建及Typora关联设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

图床工具: PicGo

图片服务器:Gitee

辅助工具:Node.js 14.17.6

图床:

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

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


1、安装 PicGo

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

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

image-20210902153833489

  • .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 就对了,下载好直接安装即可,安装好打开如下:

image-20210902154029513

2、安装 Gitee 插件

首先安装 Node.js

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

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

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

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

image-20210902154159939

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

image-20210902154228978

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

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

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

image-20210902144230482

3. 创建图片服务器

在 gitee 创建一个公共仓库

image-20210902145843002

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

image-20210902150256150

4、配置PicGo

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

image-20210902151308103

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

branch:分支,默认master即可;

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

path:路径,一般写上img;

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

5、配置Typora 与 PicGo的关联

image-20210902151951790

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

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

image-20210902152731915

image-20210902152647154

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

image-20210902153059778

修改后就成功了!

image-20210902153348215

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

此外注意:

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

using http://127.0.0.1:36677/upload

image-20210902152338885

但 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

### RMarkdown 中插入本地图片无法显示解决方案 在 RMarkdown 中插入本地图片,如果图片无法正常显示,通常可能是由于路径问题、文件格式不支持或输出格式设置不当等原因引起的。以下是解决问题的具体方法: #### 1. 确保图片路径正确 RMarkdown 支持使用相对路径和绝对路径来引用本地图片。推荐使用相对路径以确保文档的可移植性。例如,假设图片位于当前工作目录下的 `images` 文件夹中,可以这样写: ```markdown ![替代文字](images/example.jpg) ``` 如果使用绝对路径,则需要根据操作系统指定完整的路径,例如: ```markdown ![替代文字](C:/Users/Username/Documents/images/example.jpg) # Windows ![替代文字](/home/username/Documents/images/example.jpg) # Linux/Mac ``` 需要注意的是,路径中的反斜杠 `\` 在某些情况下可能需要转义为双反斜杠 `\\`[^1]。 #### 2. 检查图片格式 RMarkdown 支持多种图片格式,包括 `.png`, `.jpg`, `.jpeg`, `.gif` 等。确保所插入的图片格式是受支持的,并且没有损坏。如果不确定,可以尝试将图片转换为 `.png` 格式再进行插入[^3]。 #### 3. 设置输出格式参数 在 RMarkdown 中,可以通过代码块选项对图片显示进行控制。例如,以下代码块可以插入一张本地图片并设置其宽度和高度: ```r knitr::include_graphics("images/example.jpg") ``` 同,可以在代码块选项中添加 `fig.width` 和 `fig.height` 参数以调整图片大小: ```r {r, fig.width=6, fig.height=4} knitr::include_graphics("images/example.jpg") ``` 此外,还可以通过 `out.width` 和 `out.height` 参数以百分比形式指定图片显示比例: ```r {r, out.width="80%"} knitr::include_graphics("images/example.jpg") ``` #### 4. 确保输出格式兼容 不同的输出格式(如 HTML、PDF 或 Word)对图片的支持可能存在差异。例如,在生成 PDF 文档,建议使用 `.pdf` 或 `.eps` 格式的图片以获得更好的兼容性[^4]。如果使用的是其他格式(如 `.png` 或 `.jpg`),可能会导致图片无法正确显示。可以通过以下方式检查当前输出格式: ```yaml output: pdf_document: fig_caption: yes ``` #### 5. 验证工作目录 RMarkdown图片路径通常是相对于当前工作目录的。如果图片无法显示,可以检查当前工作目录是否正确: ```r getwd() ``` 如果工作目录与图片所在位置不符,可以使用 `setwd()` 函数更改工作目录,或者将图片移动到正确的位置。 --- ### 示例代码 以下是一个完整的 RMarkdown 示例,展示如何插入本地图片并设置相关参数: ```r {r, fig.cap="示例图片", fig.width=8, fig.height=6, out.width="90%"} knitr::include_graphics("images/example.jpg") ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值