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

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

news 2026/2/8 10:56:05

解决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

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2026/2/8 1:14:13

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2026/2/5 4:17:42

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2026/1/26 10:00:16

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2026/2/7 10:59:19

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/6 11:05:22

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2026/2/6 1:00:25

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2026/2/6 1:18:56

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2026/1/26 13:29:00