网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
github吧 关注：21,257贴子：20,763
  • 11回复贴，共1页

新人关于在github pages中写Markdown文件里插入图片的疑问

各位大佬好，本人纯纯小白啊，想建立一个自己的网站，这几天在研究github pages，现在遇到问题了，我仓库都建好了，然后编写我的.md格式文章，现在需要往里面插入图片，我在网上查有很多种方式，一种是直接引用外部网站的图片链接，但是我感觉这个不稳定，如果外部网站图片被删除了，那我的网页也没有图片了；另一种是把本地图片上传到GitHub仓库里，然后引用到Markdown文件里，但是这个办法，我怎么都没有引用成功，一个是引用相对路径，一个是引用像一串网址那样的绝对路径，都显示不出来图片。补充一点，就是我图片上传到仓库里，但是打不开，不知道和这个有没有关系
；后来我在偶然间发现了在GitHub网站中编写Markdown文件时，最下面有一个上传插入图片的地方，
我从那里点插入图片，然后从我本地电脑里选择图片插入，然后文件里就多了一条带网址的路径
，然后网页就能正常显示图片了。现在我想问，为什么我没有把图片上传到GitHub仓库，也没有引用外部链接，仅仅是从我本地电脑上传图片，就能正常显示呢？那我本地电脑图片删了，还能正常显示吗？这种插入图片的方法稳定吗？这个图片是从哪里调用的？我还是倾向于把图片上传到GitHub仓库里，然后调用。这样还方便与管理自己的图片。但是不管我怎么引用都不成功？能教教我怎么弄吗？


1）图片给出的那个域名可以看成是GitHub官方提供的“图床”，背后是Amazon S3对象存储服务。即使本地删文件，云端文件也会一直存在，所以注意不要误传隐私文件上去。
2）Markdown需要被解析渲染才能发布到GitHub Pages上，我自己是用的是Vuepress v1.8.2，本地按指定目录格式和规范写Markdown，并以相对路径（要以 ./ 开头）引用仓库内部资源，Push到仓库后由配置好的Worlflows自动编译构建成HTML站点目录并发布到Pages，这样有概率解决你的图裂问题。


我刚才又重新测试了一下，结果如下：


1，我在以下仓库位置分别上传了我要显示的图片。这个是在main又建了一个test分支，这些都是test分支下的位置。


然后我在_posts文件夹里建立了一个叫2023-03-20-ww.md的文件，然后在里面写了如下代码：

解释一下，‘仓库中引用相对路径’意思是：
‘仓库引用绝对路径’意思是：
从编辑界面直接添加图片，意思是

从仓库在图片位置复制网址意思是：

从仓库点下载链接后的地址意思是，鼠标右键点download后在弹出菜单点复制链接地址
最后我做完了打开网址，得到如下结果：

可见，从仓库中引用图片的相对和绝对路径都无法显示图片，从编辑界面引用可以显示，从图片在仓库的网址直接复制链接引用无法显示，从图片所在位置点download点右键复制链接地址可以显示。我想知道这几种方式，为什么有的可以显示，有的不行，哪一种方式最好。如果用从编辑界面引用，我没有上传我得图片到仓库中，这样我觉得不利于我管理图片。另外这是GitHub提供的图床，会不会不稳定以后。我还是觉得把图片上传到仓库里在引用放心一下。但是前两种都无法显示，我觉得这两种也挺好的。最后一种的方式感觉好奇怪啊，也有点麻烦。你们用的最简单最方便的稳定的办法是什么呢？真心求教


另外有玩GitHub pages的组织吗，真心想一起学习


另外刚才我又发现一个问题
就是在md文件的这个界面，不是代码界面，这个界面里，可以看到第一种相对引用方式，第一个和第二个路径没有显示图片，只有根目录那个显示图片了，第二种绝对引用方式，也都能显示图片，从仓库在图片位置复制网址这种方式也能显示图片，差不多都能，但是一到打开网页就有的能有的不能了。这是怎么回事？


这是我博客的其中一篇推文的渲染后效果，在开着魔法的情况下全部可以正常加载出来。

点击 Code 切换到源码视图，我这里使用的是相对路径，但开头加上 ./ 以标明从当前目录开始相对引用。

将这些 Markdown 文件经过 GitHub Workflows 流水线编译构建成 HTML 项目目录并发布在 GitHub Pages 之后，访问 Pages 页面。图片能正常加载。

我的 Markdown 文件和资源文件在编译构建之后，两者的相对路径会被更改（HTML、CSS、JavaScript、Assets 都在各自独立的目录），编译工具会把它们的相对路径自动转换成绝对路径。




用base64编码图片，然后就能图片跟随markdown走了


扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！
  • 11回复贴，共1页
分享到: