当前位置： 首页 > news >正文

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

news 2026/1/21 1:00:02

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

  • 一、发现问题
  • 二、分析问题
  • 三、解决问题
    • 图床介绍
    • 所需工具
    • PicGo软件安装操作
      • 下载安装PicGo
      • 配置PicGo
    • 设置Typora
  • 四、总结

一、发现问题

当我们使用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博客上能够正确显示图片。

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

相关文章：

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

解决Typora笔记上传到CSDN上图片无法显示的问题 一、发现问题二、分析问题三、解决问题图床介绍所需工具PicGo软件安装操作下载安装PicGo配置PicGo 设置Typora 四、总结 一、发现问题 当我们使用Typora这款强大的Markdown编辑器记录笔记时，经常会遇到一个让人困扰的…...

编程日记 2024/1/5 12:18:26

Vue3.0+Echarts （可视化界面）

Vue3.0Echarts （可视化界面） 1. 简介2. 安装2.1 下载安装Node.js2.2 全局下载项目脚手架2.3 创建项目 1. 简介 2. 安装 2.1 下载安装Node.js 2.2 全局下载项目脚手架 以管理员身份执行 npm install -g vue/cli vue --version2.3 创建项目 vue crea…...

编程日记 2024/1/5 12:17:25

编程语言的未来：探索技术进步的轨迹

编程语言的未来：探索技术进步的轨迹 随着科技的飞速发展，编程语言在计算机领域中扮演着至关重要的角色。它们是软件开发的核心，为程序员提供了与机器沟通的桥梁。然而，未来的技术进步将如何影响编程语言的走向呢？让我…...

编程日记 2024/1/5 12:16:23

SOLIDWORKS使用技巧——SOLIDWORKS草图绘制时一定要完全定义

SOLIDWORKS草图的定义状态有多种，按是否报错区分，如下： 1. 正常状态：欠定义、完全定义； 2. 错误状态的：过定义、悬空、无解； 其中，错误状态需要修复，不然会影响模型重…...

编程日记 2024/1/5 12:14:21

网络类型之GRE和MGRE和NHRP

GRE-通用路由封装 是一种简单的三层VPN封装技术，属于虚拟的点到点网络类型 优点：支持IP 网络作为承载网络、支持多种协议、支持IP 组播，配置简单，容易布署。 缺点：缺少保护功能，不能执行如认证、加密、以…...

编程日记 2024/1/5 12:13:20

uniapp获取日期

1.使用new Date()方法获取系统今天的日期&#xff0c;显示格式为&#xff1a;2023-10-28 <template><view class"content">{{date}}</view> </template> <script>export default {data() {return {date: new Date().toISOString().sl…...

编程日记 2024/1/5 12:11:18

编码和解码的未来之路

hello&#xff0c;我是小索奇。在计算机科学的世界中&#xff0c;编码和解码是无处不在的神奇力量&#xff0c;而现代技术的巅峰之一就是 ChatGPT。让我们一起探讨编码和解码如何与 ChatGPT 这一人工智能的杰作相互结合&#xff0c;打开了无限可能的数字世界之门。 ChatGPT的魔…...

编程日记 2024/1/5 12:08:16

Prometheus实战篇:Prometheus监控redis

准备环境 docker-compose安装redis docker-compose.yaml version: 3 services:redis:image:redis:5container_name: rediscommand: redis-server --requirepass 123456 --maxmemory 512mbrestart: alwaysvolumes:- /data/redis/data: /dataport:- "6379:6379"dock…...

编程日记 2024/1/5 12:06:13

Vue2.Hello World

步骤&#xff1a; 准备容器引包&#xff08;开发版本/生产版本&#xff09;创建实例new Vue()添加配置项 el指定挂载点data提供数据 准备容器 就是新建一个div标签 引包 vue2版本中文文档&#xff1a;https://v2.cn.vuejs.org/v2/guide/ 尝试 Vue.js 最简单的方法是使用 …...

编程日记 2024/1/5 12:04:11

【单片机项目实战】温度控制系统

本项目的主要作用是实现温度调控&#xff0c;通过设定一个预定的温度值&#xff0c;实现实时检测外界温度&#xff0c;当外界温度小于预定值时&#xff0c;电机正转&#xff0c;实现降温效果&#xff1b;当外界温度大于预定值时&#xff0c;电机反转&#xff0c;实现升温效果&a…...

编程日记 2024/1/5 12:03:10

SpringMVC-视图

SpringMVC中的视图实现了View接口&#xff0c;作用是渲染数据&#xff0c;将Model中的数据展示给用户。render是渲染方法&#xff0c;可以看到渲染的视图是一个View类型的对象。 SpringMVC视图的种类有很多&#xff0c;默认有转发视图和重定向视图。 如果配置了Thymeleaf视图解…...

编程日记 2024/1/5 12:01:09

【React系列】Hook（一）基本使用

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 认识hook 1.1. 为什么需要hook Hook 是 React 16.8 的新增特性&#xff0c;它可以让我们在不编写class的情况下…...

编程日记 2024/1/5 12:00:08

算法训练营Day28

#Java #贪心 开源学习资料 Feeling and experiences&#xff1a; 这周来到了贪心算法&#xff0c;简要概述&#xff1a; 贪心算法是一种在每个步骤中都采取最优解&#xff08;即&#xff0c;在当前看来最好的解&#xff09;的算法设计策略。它通常用于求解优化问题。这种方…...

编程日记 2024/1/5 11:57:06

鸿蒙OS应用开发之日期选择

前面学习了时间选择组件，实现了时间的选择，这样非常方便用户进行时间的输入，通过手动就可以输入时间，比直接文本输入要省不少时间，特别对于手机这样单手操作的设备，更加重要了。因此，日期的输入工作也不能落后，本文将要学习日期选择组件，这样就可以实现日期通过手上下…...

编程日记 2024/1/5 11:56:04

Mysql 查看表注释或字段注释

查看所有表的注释 SELECT table_name 表名, table_comment 表说明 FROM information_schema.TABLES WHERE table_schema ‘数据库名’ ORDER BY table_name 查询所有表及字段的注释 SELECT a.table_name 表名, a.table_comment 表说明, b.COLUMN_NAME 字段名, b.column_commen…...

编程日记 2024/1/5 11:55:03

MySQL InnoDB引擎

1、逻辑存储结构 2、架构 a. 内存结构 Change Buffer的意义是什么? 与聚集索引不同&#xff0c;二级索引通常是非唯一的&#xff0c;并且以相对随机的顺序插入二级索引。同样&#xff0c;删除和更新可能会影响索引树中不相邻的二级索引页&#xff0c;如果每一次都操作磁盘&am…...

编程日记 2024/1/5 11:50:59

C++完成Query执行sql语句的接口封装和测试

1、在LXMysql.h 创建Query执行函数 //封装 执行sql语句 if sqllen 0 strlen获取字符长度bool Query(const char*sql,unsigned long sqllen0); 2、在LXMysql.cpp编写函数 bool LXMysql::Query(const char* sql, unsigned long sqllen){if (!mysql)//如果mysql没有初始化好{c…...

编程日记 2024/1/5 11:49:58

C：宏：编程风格：井号与define之间的空格

在这一篇中有提到&#xff0c;井号与define之间空格&#xff0c;可能导致搜索上的一些问题。 https://mzhan017.blog.csdn.net/article/details/135289451 今天看到有专门做这个空格的修改&#xff1a; https://sourceware.org/git/?pglibc.git;acommitdiff;hfcf70d4114db9ff…...

编程日记 2024/1/5 11:46:55

django websocket

目录 核心代码 consumers.py from channels.generic.websocket import WebsocketConsumer from channels.exceptions import StopConsumer import datetime import time from asgiref.sync import async_to_sync class ChatConsumer(WebsocketConsumer):def websocket_conne…...

编程日记 2024/1/5 11:43:51

HackTheBox - Medium - Linux - Bagel

Bagel 今天我开始了《Red Team Development and Operations A Practical Guide》的学习&#xff0c;保持学习&#xff0c;后面差不多到时机后就学CRTOⅡ Bagel 是一款中等难度的 Linux 机器&#xff0c;其特点是电子商店容易受到路径遍历攻击&#xff0c;通过该攻击可以获取应…...

编程日记 2024/1/5 11:41:49

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2026/1/20 2:57:42

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2026/1/20 18:42:12

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/9/24 16:02:40

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2026/1/17 21:32:49

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/1/15 10:41:13

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

编程新知 2025/12/12 4:55:21

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/15 5:44:22

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01