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

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

news 2026/3/28 2:31:37

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

Nginx 简单使用配置

配置 user nginx; worker_processes auto;error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid;events {worker_connections 1024; }http {include /etc/nginx/mime.types;default_type application/octet-stream;log_format main $remote…...

编程新知 2026/3/28 1:41:49

棉花打包机的设计【说明书（论文）+CAD+solidworks】

棉花打包机作为农业机械化领域的关键设备&#xff0c;其核心作用在于将散状棉花高效压缩成标准化包型&#xff0c;以满足运输、仓储及后续加工的工艺需求。传统打包方式依赖人工或简单机械&#xff0c;存在效率低、包型不均、劳动强度大等问题&#xff0c;而现代棉花打包机通过…...

编程新知 2026/3/28 0:57:34

all-MiniLM-L6-v2实战教程：用Python快速实现文本聚类分析

all-MiniLM-L6-v2实战教程&#xff1a;用Python快速实现文本聚类分析 1. 引言&#xff1a;为什么选择all-MiniLM-L6-v2 文本聚类是自然语言处理中的基础任务&#xff0c;它能帮助我们发现海量文本中的隐藏模式。传统方法如TF-IDF或词袋模型往往难以捕捉语义信息&#xff0c;而…...

编程新知 2026/3/27 23:10:36

从锡膏印刷到炉温曲线：手把手调试你的第一条SMT生产线（避坑指南）

从锡膏印刷到炉温曲线&#xff1a;手把手调试你的第一条SMT生产线&#xff08;避坑指南&#xff09; 第一次接手SMT生产线调试时&#xff0c;我盯着那台二手贴片机的报警提示&#xff0c;手心全是汗。钢网上残留的锡膏像在嘲笑我的无知&#xff0c;而流水线上堆积的PCB板则不断…...

编程新知 2026/3/27 23:08:36

Qwen3.5-4B-Claude-Opus推理模型基础教程：Temperature/Top-P参数详解

Qwen3.5-4B-Claude-Opus推理模型基础教程&#xff1a;Temperature/Top-P参数详解 1. 模型概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是一个基于Qwen3.5-4B的推理蒸馏模型&#xff0c;特别强化了结构化分析、分步骤回答以及代码与逻辑类问题的处理能力。该模型…...

编程新知 2026/3/27 23:02:34

激活函数进化史：从Sigmoid到ELU，聊聊那些年我们踩过的‘梯度消失’和‘神经元死亡’的坑

激活函数进化史&#xff1a;从Sigmoid到ELU&#xff0c;聊聊那些年我们踩过的‘梯度消失’和‘神经元死亡’的坑 神经网络的世界里&#xff0c;激活函数就像神经元之间的"翻译官"&#xff0c;负责将输入信号转化为有意义的输出。但这位翻译官的脾气可不太好琢磨——…...

编程新知 2026/3/27 22:38:22

Unity引擎开发过的VR大场景项目有哪些？用到的网络技术，资源处理及热更新方案有哪些

我梳理了Unity引擎开发的VR大场景代表性项目&#xff0c;并从网络技术、资源处理、热更新方案三个核心技术维度进行了详细分析。一、代表性VR大场景项目 1. 基于VR的数字孪生智慧城市平台 开发方&#xff1a;香港理工大学温州技术创新研究院技术特点&#xff1a;整合GIS地理信息…...

编程新知 2026/3/27 22:06:04

新手友好：在快马平台用mc、jc相关案例轻松上手前端开发

作为一个刚接触前端开发的新手&#xff0c;我最近在InsCode(快马)平台尝试做了一个特别适合练手的小工具——代码行数统计器。这个项目用最基础的HTML、CSS和JavaScript实现&#xff0c;但包含了前端开发的几个核心概念&#xff0c;特别适合想通过实际案例学习的朋友。 项目功能…...

编程新知 2026/3/27 20:15:08

硬件工程师职业发展路径与核心技术解析

硬件工程师的职业发展路径与技术深度探讨1. 行业现状与职业定位1.1 硬件工程师的职责演变现代硬件工程师的职责范围已从传统的电路设计扩展到系统集成、信号完整性分析、EMC设计等多个领域。典型的职责矩阵包括&#xff1a;职责类别传统要求现代扩展要求电路设计原理图绘制、PC…...

编程新知 2026/3/27 19:38:58

OpenClaw 全面解析：Token时代的iPhone如何颠覆开发者工作流？

前言&#xff1a;两周15万Star背后的技术革命 2026年初&#xff0c;一个名为 OpenClaw 的开源项目在 GitHub 上以惊人速度走红——两周内突破 15 万 Star&#xff0c;如今已达 310k Star&#xff0c;成为近年来增速最快的开源项目之一。 黄仁勋在最新访谈中将其称为 “Token时代…...

编程新知 2026/3/27 19:34:57