新人关于在github pages中写Markdown文件里插入图片的疑问
github吧
全部回复
仅看楼主
level 2
qubingchen812 楼主
各位大佬好,本人纯纯小白啊,想建立一个自己的网站,这几天在研究github pages,现在遇到问题了,我仓库都建好了,然后编写我的.md格式文章,现在需要往里面插入图片,我在网上查有很多种方式,一种是直接引用外部网站的图片链接,但是我感觉这个不稳定,如果外部网站图片被删除了,那我的网页也没有图片了;另一种是把本地图片上传到GitHub仓库里,然后引用到Markdown文件里,但是这个办法,我怎么都没有引用成功,一个是引用相对路径,一个是引用像一串网址那样的绝对路径,都显示不出来图片。补充一点,就是我图片上传到仓库里,但是打不开,不知道和这个有没有关系
;后来我在偶然间发现了在GitHub网站中编写Markdown文件时,最下面有一个上传插入图片的地方,
我从那里点插入图片,然后从我本地电脑里选择图片插入,然后文件里就多了一条带网址的路径
,然后网页就能正常显示图片了。现在我想问,为什么我没有把图片上传到GitHub仓库,也没有引用外部链接,仅仅是从我本地电脑上传图片,就能正常显示呢?那我本地电脑图片删了,还能正常显示吗?这种插入图片的方法稳定吗?这个图片是从哪里调用的?我还是倾向于把图片上传到GitHub仓库里,然后调用。这样还方便与管理自己的图片。但是不管我怎么引用都不成功?能教教我怎么弄吗?
2023年03月19日 12点03分 1
吧务
level 12
1)图片给出的那个域名可以看成是GitHub官方提供的“图床”,背后是Amazon S3对象存储服务。即使本地删文件,云端文件也会一直存在,所以注意不要误传隐私文件上去。
2)Markdown需要被解析渲染才能发布到GitHub Pages上,我自己是用的是Vuepress v1.8.2,本地按指定目录格式和规范写Markdown,并以相对路径(要以 ./ 开头)引用仓库内部资源,Push到仓库后由配置好的Worlflows自动编译构建成HTML站点目录并发布到Pages,这样有概率解决你的图裂问题。
2023年03月20日 00点03分 2
3)还有一种图裂可能和你网络有关系,尝试开魔法可能就加载出来了。
2023年03月20日 00点03分
level 2
qubingchen812 楼主
我刚才又重新测试了一下,结果如下:
2023年03月20日 05点03分 3
level 2
qubingchen812 楼主
1,我在以下仓库位置分别上传了我要显示的图片。这个是在main又建了一个test分支,这些都是test分支下的位置。
然后我在_posts文件夹里建立了一个叫2023-03-20-ww.md的文件,然后在里面写了如下代码:
解释一下,‘仓库中引用相对路径’意思是:
‘仓库引用绝对路径’意思是:
从编辑界面直接添加图片,意思是
从仓库在图片位置复制网址意思是:
从仓库点下载链接后的地址意思是,鼠标右键点download后在弹出菜单点复制链接地址
最后我做完了打开网址,得到如下结果:
可见,从仓库中引用图片的相对和绝对路径都无法显示图片,从编辑界面引用可以显示,从图片在仓库的网址直接复制链接引用无法显示,从图片所在位置点download点右键复制链接地址可以显示。我想知道这几种方式,为什么有的可以显示,有的不行,哪一种方式最好。如果用从编辑界面引用,我没有上传我得图片到仓库中,这样我觉得不利于我管理图片。另外这是GitHub提供的图床,会不会不稳定以后。我还是觉得把图片上传到仓库里在引用放心一下。但是前两种都无法显示,我觉得这两种也挺好的。最后一种的方式感觉好奇怪啊,也有点麻烦。你们用的最简单最方便的稳定的办法是什么呢?真心求教
2023年03月20日 05点03分 4
level 2
qubingchen812 楼主
另外有玩GitHub pages的组织吗,真心想一起学习
2023年03月20日 05点03分 5
就pages的话lofter吧群讨论更多:571168348,以及本吧吧群:901401567
2023年03月27日 18点03分
level 2
qubingchen812 楼主
另外刚才我又发现一个问题
就是在md文件的这个界面,不是代码界面,这个界面里,可以看到第一种相对引用方式,第一个和第二个路径没有显示图片,只有根目录那个显示图片了,第二种绝对引用方式,也都能显示图片,从仓库在图片位置复制网址这种方式也能显示图片,差不多都能,但是一到打开网页就有的能有的不能了。这是怎么回事?
2023年03月20日 05点03分 6
吧务
level 12
这是我博客的其中一篇推文的渲染后效果,在开着魔法的情况下全部可以正常加载出来。
点击 Code 切换到源码视图,我这里使用的是相对路径,但开头加上 ./ 以标明从当前目录开始相对引用。
将这些 Markdown 文件经过 GitHub Workflows 流水线编译构建成 HTML 项目目录并发布在 GitHub Pages 之后,访问 Pages 页面。图片能正常加载。
我的 Markdown 文件和资源文件在编译构建之后,两者的相对路径会被更改(HTML、CSS、JavaScript、Assets 都在各自独立的目录),编译工具会把它们的相对路径自动转换成绝对路径。
2023年03月21日 02点03分 7
我建议是使用 Vuepress / Vitepress / Hugo / Hexo 这一类静态网站编译工具把你的 Markdown 编译成 HTML 后再发布到 GitHub Pages 去。编译工具一般有开发模式可以本地启动一个服务器查看编译渲染后的效果,可以在本地检查无异常后再执行发布。
2023年03月21日 02点03分
level 10
[滑稽]
2023年03月21日 09点03分 8
level 1
[滑稽]用base64编码图片,然后就能图片跟随markdown走了
2023年03月27日 16点03分 9
1