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

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

news 2026/5/12 20:55:53

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

RAD-NeRF：面向实时人像合成的神经辐射场高效架构

1. 项目概述&#xff1a;当NeRF遇上实时人像&#xff0c;RAD-NeRF到底在解决什么问题&#xff1f;我第一次看到“Efficient NeRFs for Real-Time Portrait Synthesis (RAD-NeRF)”这个标题时&#xff0c;手边正调试一个跑在RTX 4090上的标准NeRF模型——单帧渲染耗时23秒&#…...

编程新知 2026/5/12 19:37:04

斐讯K3从梅林‘变砖’到官复原职：一个手残党的硬核救砖全记录（附TTL/编程器操作避坑点）

斐讯K3救砖实战&#xff1a;从梅林固件崩溃到完美恢复的完整指南 1. 当路由器变成"砖头"&#xff1a;一个普通用户的崩溃瞬间 那是一个普通的周末下午&#xff0c;我正兴冲冲地准备给我的斐讯K3刷上梅林固件&#xff0c;幻想着能获得更强大的功能和更稳定的性能。按照…...

编程新知 2026/5/12 19:11:46

3步视频PPT智能提取：告别繁琐截图，拥抱自动化高效工作流

3步视频PPT智能提取&#xff1a;告别繁琐截图&#xff0c;拥抱自动化高效工作流 【免费下载链接】extract-video-ppt extract the ppt in the video 项目地址: https://gitcode.com/gh_mirrors/ex/extract-video-ppt 还在为从视频中手动截取PPT幻灯片而烦恼吗&#xff1…...

编程新知 2026/5/12 17:30:05

原神模型导入终极指南：GIMI深度定制框架完全解析

原神模型导入终极指南&#xff1a;GIMI深度定制框架完全解析 【免费下载链接】GI-Model-Importer Tools and instructions for importing custom models into a certain anime game 项目地址: https://gitcode.com/gh_mirrors/gi/GI-Model-Importer 原神模型导入&#x…...

编程新知 2026/5/12 17:14:55

Cursor编辑器配置重置工具：自动化清理与恢复出厂设置

1. 项目概述与核心价值 最近在折腾代码编辑器&#xff0c;特别是像 Cursor 这类深度整合了 AI 能力的 IDE&#xff0c;发现一个挺有意思但容易被忽略的问题&#xff1a; 编辑器配置的“熵增” 。简单来说&#xff0c;就是你用久了之后&#xff0c;各种插件、主题、快捷键、代…...

编程新知 2026/5/12 16:32:20

惠来海康医院眼科母亲节：愿岁月温柔，护她眼底有光

惠来海康医院眼科母亲节&#xff1a;愿岁月温柔&#xff0c;护她眼底有光五月浅夏&#xff0c;暖意氤氲&#xff0c;当康乃馨的芬芳漫过街巷&#xff0c;母亲节便载着满心敬意如期而至。母亲&#xff0c;是岁月里最温柔的守望者&#xff0c;用一双眼眸&#xff0c;藏下对我们所…...

编程新知 2026/5/12 16:02:28

单片机软件架构师使用Taotoken多模型对比分析内存分配策略

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 单片机软件架构师使用Taotoken多模型对比分析内存分配策略 在嵌入式软件开发中&#xff0c;内存分配策略的选择直接影响着系统的实…...

编程新知 2026/5/12 14:19:08

LocalClaw：一键部署本地AI工作站，简化macOS大模型环境搭建

1. 项目概述&#xff1a;LocalClaw macOS 安装器 如果你是一名在 Apple Silicon Mac 上折腾本地大语言模型的开发者或爱好者&#xff0c;那么对 LM Studio 和 OpenClaw 这两个名字一定不陌生。前者是一个强大的本地 LLM 运行和管理工具&#xff0c;后者则是一个开源的、类 Chat…...

编程新知 2026/5/12 13:40:43

AI命令行自动执行工具：从剪贴板监听、内容过滤到终端注入的实现原理

1. 项目概述&#xff1a;一个让Claude“粘贴”命令行的效率工具如果你经常和Claude这类AI助手对话&#xff0c;并且需要处理命令行操作&#xff0c;那你一定遇到过这个痛点&#xff1a;Claude给出的代码片段、配置命令或者文件路径&#xff0c;你需要手动复制、切换窗口、粘贴到…...

编程新知 2026/5/12 12:38:41

如何为iOS 14.0-16.6.1设备安装TrollStore：TrollInstallerX完整指南

如何为iOS 14.0-16.6.1设备安装TrollStore&#xff1a;TrollInstallerX完整指南 【免费下载链接】TrollInstallerX A TrollStore installer for iOS 14.0 - 16.6.1 项目地址: https://gitcode.com/gh_mirrors/tr/TrollInstallerX 如果你正在寻找一种可靠且简单的方法在i…...

编程新知 2026/5/12 11:30:40