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

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

news 2025/10/19 4:00:33

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

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/10/4 16:37:34

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/10/16 23:54:51

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/8/4 2:45:15

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/10/18 14:25:25

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/10/18 15:49:46

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/7/9 17:59:19

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...

编程新知 2025/7/9 12:15:58

热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...

编程新知 2025/9/28 5:29:29

CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx

“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网&#xff08;IIoT&#xff09;场景中&#xff0c;结合 DDS&#xff08;Data Distribution Service&#xff09; 和 Rx&#xff08;Reactive Extensions&#xff09; 技术&#xff0c;实现 …...

编程新知 2025/10/14 6:55:41

第22节 Node.js JXcore 打包

Node.js是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。 JXcore是一个支持多线程的 Node.js 发行版本&#xff0c;基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 本文主要介绍JXcore的打包功能。 JXcore 安装 下载JXcore安装包&a…...

编程新知 2025/10/18 16:24:53