解决Typora笔记上传到CSDN上图片无法显示的问题

发布时间:2024年01月05日

一、发现问题

当我们使用Typora这款强大的Markdown编辑器记录笔记时,经常会遇到一个让人困扰的问题:在将笔记上传到CSDN博客或者其他网站上后,图片无法正确显示。这不仅会大大降低我们的效率,还可能给他人理解我们的内容带来困难。如下图所示:

image-20240104173124605

二、分析问题

因为我们在本地Typora插入图片时,图片路径写的时本地的绝对路径,如![image-20231221155147039](C:\Users\xiaoming\AppData\Roaming\Typora\typora-user-images\image-20231221155147039.png)。当我们要将全文直接从Typora复制粘贴CSDN时,CSDN无法识别出我们的本地绝对路径,所以会造成图片无法显示的问题。

三、解决问题

解决方案:我们将图片通过Typora自动上传到网上的某个地址,这里也就可以引出今天的主角 —— 图床,即可解决我们图片无法显示的问题。

图床介绍

  • Gitee

    • 我在最开始的时候是使用的这种办法,因为它是免费的。但是在2022年05月份的时候Gitee官方关闭了这一功能,至此该方式就无效了。

    image-20240104174431436

  • Github

    • 这种方式也是免费的,但是国内访问速度太慢了,就不做演示了。
  • 阿里云的OSS

    • 专业、快速、价格也便宜,我使用的也是这种方式。

所需工具

  • PicGo

    • PicGo是一款开源的图片上传工具,专为Markdown编辑器、博客平台和其他应用程序设计。它允许用户快速、便捷地将本地图片上传至图床,并生成可供分享的图片链接。这些链接可以被直接插入到Markdown文档、博客文章或其他在线内容中,确保图片可以在任何地方正确显示。
    • PicGo支持丰富的图床类型,包括但不限于:七牛、腾讯云、阿里云、GitHub等。
    • 除了提供图床上传功能,PicGo还内置了图片压缩、文件命名、历史记录管理等实用工具,让用户能够更加方便地处理和管理上传的图片。它还支持批量上传、拖拽上传、剪贴板上传等多种上传方式,大大提升了用户的上传效率。
  • 阿里云账号

    • 进入阿里云的官网,先注册一个账号即可。

    • 最上方点击产品 - 存储 - 对象存储OSS

      image-20240104180442350

    • 进入对象存储OSS的界面后,划到界面底部,找到标准存储点击进入。

      image-20240104180652446

    • 进入界面后,进行如下配置:

      • 商品类型选择:OSS资源包
      • 资源包类型选择:标准 - 本地冗余存储
      • 地域选择:中国内地通用
      • 标准 - 本地冗余存储规格选择:40GB
      • 购买时长选择:半年或者1年,根据自己的意向进行选择

      image-20240104181257069

      • 因为我已经购买过此产品所以有红色提示。
    • 开通成功后,这里会显示管理控制台,然后点击进入

      image-20240104181554178

    • 找到并点击蓝色按钮 - 创建Buckets

      image-20240104181909998

    • 输入Bucket名称地域、选择读写权限公共读,其余配置默认,然后点击确定即可。

    • 点击头像,选择AccessKey管理

      image-20240104182406270

    • 进入后选择继续使用AccessKey,然后点击创建AccessKey,认证成功后,记得保存好自己的ID和Secret!!!!!!

    我们的阿里云OSS部分的操作就完成了!

PicGo软件安装操作

下载安装PicGo

进入下载地址,找到合适的安装包(我下载的是2.3.1版本的)点击进行下载即可。(Github的服务器在国外,所以访问和下载会慢一点)

image-20240104184243254

下载好安装包后,点击安装即可,安装路径建议不要做修改使用默认即可,不然可能会导致软件无法使用。

image-20240104185117798

配置PicGo

  • 下载好之后,打开PicGo,在左侧导航中找到PicGo设置,勾选上你所使用的图床

image-20240105095546055

  • 然后在PicGo设置中找到设置Server,并点击进入

image-20240105095656327

  • 这里弹出的窗口,默认配置即可,有的时候设置监听端口号那里会自动改为366771,我们必须将其改为36677!!!

image-20240105095927757

  • 在左侧导航栏中找到图床设置 - 阿里云OSS,然后进行以下的设置,最后点击确定将其设为默认图床即可。
    • 设定KeyId:创建Bucket时的AccessKey ID
    • 设定KeySecret:创建Bucket时的AccessKey Secret
    • 设定Bucket:创建Bucket时的名称
    • 确定存储区域:这里按照阿里云OSS上Bucket列表中的信息填写即可
    • 其余配置,均不需要进行配置

image-20240105100444686

image-20240105100655766

  • 我们点击左侧导航栏中的上传区,进行图片上传测试。

image-20240105101106242

显示上传成功,即说明我们已经配置成功了!!!

设置Typora

  • 打开Typora,点击设置 - 偏好设置

image-20240105101723114

  • 点击左侧导航栏中的图像,选择上传图片,勾选对本地位置的图片应用上述规则 对网络位置的图片应用上述规则,上传服务选择PicGo(app),然后点击验证图片上传选项

image-20240105102030775

image-20240105102044924

  • 这里报错了,然后我回头看了下配置,发现没有配置PicGo路径,我以为它当时会自动匹配路径,这里就感觉不是很友好了在用户体验方面。最后配置路径后,验证上传成功!!!

image-20240105102305040

四、总结

通过本文的介绍,我们详细探讨了如何使用PicGo解决Typora笔记上传到CSDN上图片无法显示的问题。通过配置PicGo工具,我们可以将Typora笔记中的图片轻松上传至对应的图床,并获取可访问的图片链接,从而确保我们的笔记在CSDN博客上能够正确显示图片。

感谢您的阅读,如果您对本文内容有任何疑问或建议,欢迎在下方留言!

文章来源:https://blog.csdn.net/weixin_57367513/article/details/135404662
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。