我写了一个跨平台开源小工具，让Github的README.md完美显示gif，png大图

最新推荐文章于 2024-02-26 22:37:32 发布
最新推荐文章于 2024-02-26 22:37:32 发布
阅读量331 收藏
点赞数
文章标签： Github README.md
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuoyuedelan/article/details/112966328
版权

在这里插入图片描述

先看转换前后的效果对比

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
在这里插入图片描述
在这里插入图片描述

本项目永久更新地址

https://github.com/zhaoolee/replace_readme_md_image

如何使用本项目?

编译好的的软件包，请到本项目的dist目录下自取

平台使用方法 ｜
Windows平台1. 将 replace-readme-md-image-win.exe 放入项目根目录;
2. 给replace-readme-md-image-win.exe右键,属性,勾选以管理员身份运行;
3. 双击运行replace-readme-md-image-win.exe 即可;
Mac平台1. 将replace-readme-md-image-mac.command 放入项目根目录;
2. 通过命令行进入项目，在命令行运行 chmod 777 replace-readme-md-image-mac.command;
3. 在命令行运行./replace-readme-md-image-mac.command 即可;
Linux平台1. 将replace-readme-md-image-linux.sh 放入项目根目录;
2. 通过命令行进入项目，在命令行运行 chmod 777 replace-readme-md-image-linux.sh;
3.在命令行运行 ./replace-readme-md-image-linux.sh即可

痛点: Github的README.md展示图片效果并不完美

为了让项目演示更生动形象, 我们可以往README.md中插入一些图片

但Github会对README.md中的站外图片会进行地址转换,如果图片尺寸很小,这种转换完全没有问题, 但如果图片尺寸稍大, github的只能转换出半张图, 图片展示的效果极差

比如 将https://v2fy.com/asset/bilibili_wallpaper/3203841-ee56972a7e14ff43.png转换为https://camo.githubusercontent.com/e2b664d80ebe666681016c66d2b42ee9f8f9ec3e6c73d3a34accdaadba84b23a/687474703a2f2f763266792e636f6d2f61737365742f62696c6962696c695f77616c6c70617065722f333230333834312d656535363937326137653134666634332e706e67

在这里插入图片描述

原图

在这里插入图片描述

被github转换后的图片

在这里插入图片描述

如何解决README.md中大图展示不完美的问题?

将图片上传的到github即可!

我们可以将README.md中的图片存储到仓库根目录的README文件夹, 然后用图片在github的url, 替换原有的图片链接.

我分析了一下github 仓库中包含图片的url的规则

https://raw.githubusercontent.com/ + 用户名 + / + 仓库名 + /master/ + 相对仓库根目录的文件夹路径 + / + 图片名;

如果图片名称为1610212776529GNazs3pP.gif, 图片存储在 zhaoolee的 EasyTypora 仓库的 README文件夹下,那它的最终url为

https://raw.githubusercontent.com/zhaoolee/EasyTypora/master/README/1610212776529GNazs3pP.gif

但是手工替换所有的图片太累了, 于是我写了一个自动化的程序

  • 程序支持转换网络图片为github路径
  • 程序支持转换本地路径图片为github路径
  • 程序自动读取仓库下的.git/config,获取用户名和仓库名称
  • 自动判断前缀, 对于已经转换的图片, 重复运行程序无需重新爬取,节约流量!

最终效果对比

图片替换前: 图片显示有好有坏,能否显示,全凭运气

在这里插入图片描述

图片替换后: 所有大图正常显示!

在这里插入图片描述

zhaoolee
关注
Qt开发经验总结
草上爬的博客
12-02 8236
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
Dapr 的一个轻量级、安全、可移植且高性能的 runtime
weixin_42376823的博客
10-26 773
Dapr 的一个轻量级、安全、可移植且高性能的 runtime 本文作者：Michael Yuan，WasmEdge Maintainer 本文源发自 infoQ.com，链接：https://www.infoq.com/articles/webassembly-dapr-wasmedge/ 本文要点： Dapr 是功能强大的构建微服务的框架。 WebAssembly VM，如 WasmEdge，为微服务应用程序提供高性能且安全的 runtime。 基于WebAssembly的微服务可以用多种编程语言
github-markdown-printer:完全按照GitHub上显示的方式打印GitHub Flavored Markdown
03-27
github-markdown-printer 只需单击两次，即可完全按其在GitHub上的显示方式打印GitHub Flavored Markdown。 从或。 相对于其他降价转换器的优势 这比下载markdown文件并通过转换器运行它更容易，更快。 这也会产生更好的结果。 用法 转到GitHub上可以看到降价预览的任何页面。 单击GMP图标，这将打开带有打印预览的打印对话框。 选择您的打印机或另存为PDF并打印。 故障排除 如果遇到以下未列出，请。 代码块没有阴影 确保在打印预览中启用了“背景图形”。 要进行检查，请在打印预览中单击“更多设置”，然后查找“背景图形”。 缩进在代码块中很奇怪 页面中不适合的长代码段将被包装到下一行。 这种包裹可能会使压痕弄乱。
README.md中添加并显示gif图片方法
H.A.N的博客
10-09 6155
为了进入我Github主页的人直接看到代码实现的效果图，所以上传了一张gif图片。可能对于没有上传过gif图片的人可能很陌生，所以在这里在写一篇博客稍微总结下。 具体步骤如下： 首先把制作好的gif图片拉进工程的目录中。建议：制作gif图片可以使用licecap这个软件，用起来还是相当简便的。 打开电脑上的终端。 cd + 工程文件夹，接着用Git命令上传gif图片到Github上。 打开Git...
Github 工程README.md 添加图片，GIF动画图片
每一件自己觉得值得的事都要不留余力的去做
10-04 3457
1、工程提交时，把png、jpg等图片一起随工程上传，可以新建一个images文件夹。上传后在github点击那个工程，找到图片，然后点击会在窗口显示图片；这时候把浏览器地址栏复制一下，一般这个图片链接如下格式： https://github.com/ljheee/HexTransform/blob/master/abc.jpg 2、README.md中需要图片的地方，添加图片引用(图片链接)即...
关于GitHub的Md文件中上传的gif图片无法正常显示的那点事
zjcoming
04-05 1188
【1】问题描述 最近自己开发了一个项目，想要把项目代码上传到github，并在README中详细说明项目的过程，其中就需要插入对于项目的截图。一开始，我只是在README中使用图片的本地地址，然而，README上传后却无法显示图片。分析问题：图片在本地的当然无法显示啦，然后我就在项目目录创了个images目录，将图片存在这里，然后一起提交到github，然后将README中的图片地址改成github中的图片地址，结果还是无法显示。分析问题：上传到github中的图片加密了只能用户登录才能看到，后来到网上.
png库
weixin_30512089的博客
12-29 309
struct png { //colorType: //0 = L //2 = R,G,B //3 = P //4 = L,A //6 = R,G,B,A struct Info { unsigned width; unsigned height; unsigned bitDepth; unsigned colorType; unsigned com...
一个牛奔的Android开源大全
watertekhqx的博客
01-25 6831
leobert.lan的博客 一起学习目录视图 摘要视图 订阅 聚焦行业最佳实践，BDTC 2016完整议程公布 微信小程序实战项目——点餐系统 程序员11月书讯，评论得书啦 Get IT技能知识库，50个领域一键直达 github上的优秀android开源项目 2015-11-17 16:35 1219人阅读 评论(0) 收藏 举报目录(?)[+]酷
自如大前端-web动画探索(一)
gyj129129的专栏
02-04 587
前端项目直面客户，为了更好的交互体验，免不了需要使用动画来增香提味。在此分享自如动画的尝试与探索。 一、简单的过渡效果transition 使用transition实现：位移、旋转、缩放、透明度等简单过渡效果。 **优点：**流畅、简单。 **缺点：**仅能实现简单动画，仅能监控动画结束（transitionend），无法实现用户交互。 transitionend（结束）事件监控： <template> <div class="box1" ref="box1" :class="{mov
github上关于iOS的各种开源项目集合
livexiaopo
08-03 4506
UI 下拉刷新 EGOTableViewPullRefresh - 最早的下拉刷新控件。SVPullToRefresh - 下拉刷新控件。MJRefresh - 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能。可以自定义上下拉刷新的文字说明。具体使用看“使用方法”。 （国人写）XHRefreshControl -
evaristocuesta:欢迎来到我的Github个人资料。 这是我动态生成的README.md配置文件，您可以在其中播放Minesweeper
03-14
大家好！ 我是Evaristo，是Altran的高级顾问和工程师，在空中客车公司开发.NET软件。 我很幸运，我的爱好之一已经成为我的职业。 但是，不仅软件开发是我的爱好。 我也对音乐和摄影充满热情。 个人摄影网站 专业软件开发人员网站 你想玩扫雷吗？ 欢迎大家玩扫雷。 我该怎么玩？ 当您单击链接（单元格）时，它会打开Github Issue，并在标题中显示命令和单元格位置。 如果要显示单元格，只需按“提交新问题”而不编辑标题即可。 如果要标记单元格，请在标题中将“ revealcell”替换为“ flagcell”。 此问题将触发一个Git Actions工作流，该工作流将执行.NET 5 Console App。 几分钟后将更新README.md。 例子： 显示单元| 3 | 4 标志单元| 2 | 7 如果您想知道某人何时玩过，请观看此存储库 如果喜欢，请为该存储库加
等待loading状态图标gif动画大全
05-10
等待loading状态图标gif动画大全
在github的简介readme中添加演示gif,附带gif制作工具
RollingPin的博客
07-26 1311
只需简单几步即可完成: 1.首先是制作gif 推荐两个软件 LICEcap 这个可以直接框住电脑屏幕一部分直接录制生成gif. 地址: https://www.cockos.com/licecap/ gifrocket 这个是可以把视频转换成gif的工具,直接拖拽进去就可以,操作简单.地址: http://www.gifrocket.com/ 2....
GitHub上README写法暨GFM语法解读
weixin_30730053的博客
04-15 2753
转载请保留原作者guodongxiaren的原文地址。 自从开始玩GitHub以来，就越来越感觉它有爱。最近对它的README.md文件颇为感兴趣。便写下这贴，帮助更多的还不会编写README文件的同学们。 README文件后缀名为md。md是markdown的缩写，markdown是一种编辑博客的语言。用惯了可视化的博客编辑器（比如CSDN博客，囧），这种编程式的博客编辑方案着实...
github README.md插入图片,图片尺寸设置,图片无法显示解决
a1441574的博客
04-25 5884
github README.md插入图片无法显示问题解决排查原因图片引入设置图片尺寸解决方法 排查原因 今日在使用github .md在插入图片时引自己仓库里图片不能正常显示, 搜集排查原因主要是: dns污染 host设置错误 官方更新了dns，但是dns缓存没有被更新，导致错误解析。 图片引入 网络资源图片引入方式 `` ![]() //[]中可选填图片文字说明,()*填写图片的url...
【github&gif】极简且免费制作demo.gif并放入项目首页
记录
12-06 456
前言：使用手机自带录屏/电脑自带录屏工具+浏览器，不需要额外下载软件制作demo的gif动图，并将其放入github项目首页。
在github的README.md中插入视频；在github的README.md中添加gif演示动画
AnChenliang_1002的博客
02-26 2410
最近需要再github中上传项目的源代码，应导师的要求，需要再README中加入对实验视频的展示，但是github的README.md其实就是一个markdown文件，据我的理解这个文件里应该无法直接插入视频吧？（如果后续有办法直接插入视频再补充吧）markdown文件里是可以插入动图的呀，所以我暂且将视频转换为gif动图并插入到README.md中，下面记录一下整个过程。
Matlab Simulink#直驱永磁风电机组并网仿真模型 基于永磁直驱式风机并网仿真模型 采用背靠背双PWM变流器，先整流
最新发布
09-18
Matlab Simulink#直驱永磁风电机组并网仿真模型 基于永磁直驱式风机并网仿真模型。 采用背靠背双PWM变流器，先整流，再逆变。 不仅实现电机侧的有功、无功功率的解耦控制和转速调节,而且能实现直流侧电压控制并稳定直流电压和网侧变换器有功、无功功率的解耦控制。 风速控制可以有线性变风速，或者恒定风速运行，对风力机进行建模仿真。 机侧变流器采用转速外环，电流内环的双闭环控制，实现无静差跟踪。 后级并网逆变器采用母线电压外环，并网电流内环控制，实现有功并网。 并网电流畸变率在2%左右。 附图仅部分波形图，可根据自己需求出图。 可用于自用仿真学习，附带对应的详细说明及控制策略实现的paper，便于理解学习。 模型完整无错，可塑性高，可根据自己的需求进行修改使用。 包含仿真文件和说明
github readme.md文档规范
03-16
GitHub 的 README.md 文档规范是指在 GitHub 上创建项目时，需要编写一个 README.md 文件来介绍项目的内容、使用方法、贡献者等信息。这个文件需要遵循一定的规范，包括使用 Markdown 语法、添加项目标题、描述、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值