关于Markdown图片无法显示的问题解决方法

时间:2024-03-23 08:22:16

备注: 在网上找了半天,一堆不靠谱的试了以后,终于被我试出来了哈哈哈,我可真是个小天才

步骤是这样子的

  1. 在自己的github上新建一个仓库, 怎么新建仓库大家应该都会吧,我这里就不赘述了,就像下面这样:

    关于Markdown图片无法显示的问题解决方法

  2. 点开自己新建的仓库,在右边有个clone or download,复制下来地址,如图所示:

    关于Markdown图片无法显示的问题解决方法

  3. 打开hexo所在文件夹,右键鼠标然后点击 Git Bash Here,然后在本机将github中的仓库克隆下来,命令是: git clone 仓库地址(地址就是你复制下来的地址),不懂就看图吧:

    关于Markdown图片无法显示的问题解决方法

  4. 克隆成功后在hexo文件夹中会有一个以你的仓库名命名的文件夹,例如我的是MyPostImage,然后将图片放在该文件夹下就行;

    1. 注意:
      1. 这里有个小技巧:你可以每次要在一篇博客中添加图片时候,新建一个和本篇博客名字相同的文件夹放在MyPostImage下面,这样就比较容易整理;
      2. 你要是怕自己新建的文件夹和博客名字不一致,你可以这样子新建一篇博客文章:在bash窗口下输入命令hexo n "博客名字",这样子系统就会自动在hexo > source > _posts路径下生成一个和本篇博客名相同的文件夹,然后将文件夹复制到MyPostImage下面就可以了.
  5. 进入MyPostImage文件夹(注意不是和博客名字相同的那个文件夹,是名字和仓库名相同的的文件夹),右键鼠标然后点击 Git Bash Here,打开Bash窗口然后输入git add .,(注意这里有一个点),然后输入命令git commit -m "文件名",最后将内容推送上仓库就可以了,命令是:git push origin master;

  6. 上传成功后去自己的github仓库看看,你就会发现,产生了一个git commit -m "文件名"中以文件名为名字的文件夹,图片就在该文件夹中,就像这样子:

    关于Markdown图片无法显示的问题解决方法

  7. 点击图片,当你看到图片以后,复制该图片的路径.就像这样:

    关于Markdown图片无法显示的问题解决方法

  8. 然后打开我的新建的md文件,并且插入图片,代码是:![图片名](图片路径 "图片无法显示或鼠标移上去的时候显示的文字"),例子如下(这个图片是我在网上偷的啊哈哈):

    关于Markdown图片无法显示的问题解决方法

  9. 但是我们预览的时候会出现一个问题,就是预览的时候图片还是显示不出来,这个时候我们改路径的一个文件名就可以了,因为github和md文件关联的图片地址是有一定格式的,格式如下:

    1. https://github.com/用户名/repository仓库名/raw/分支名master/图片文件夹名称/***.png or***.jpg

    2. 看不懂吧,其实就是将blob改成raw就行,万一还看不懂就看图:

      关于Markdown图片无法显示的问题解决方法

  10. bash下运行博客,你会发现图片这时候就可以看到了,大功告成哈哈!

  11. 其实这里面可能还有很多技巧啥的,我暂时还不会,暂时会这个就可以了吧哈哈哈,因为反正图片不是太多,要是有啥不清楚的,随时可以通过博客联系我,在about里面可以找到我哈哈哈,最后附上一张我很喜欢的图片吧,希望各位和它一样每天都开心!

    关于Markdown图片无法显示的问题解决方法