通过将图片上传GitHub仓库,使用网络图片引用的方式解决图片插入问题

根据vs code提示插入图片 按提示插入图片

但是插入的图片却无法在网页上正常显示 text

尝试更改路径后,发现无论是绝对路劲还是相对路劲都无法显示图片

探索良久后依然无法找到本地图片的插入方式(实际上成功本地插入图片过,但我忘了-_-||),加上本地图片容易丢失所以我选择了网络图片插入方式。

我们利用GitHub仓库,即可实现本地图片的网络化。在GitHub中新建一个仓库,用于存储照片,记得勾选上创建README 创建仓库

copy下仓库的路径 复制路劲

在本地新建一个文件夹,将路径移动到新建文件夹下,将GitHub仓库克隆下来,命令是git clone 仓库地址(要使用git命令得先在电脑上装好git-bash) 克隆仓库

克隆完后会有你所建仓库名的文件夹,在仓库文件夹下添加你要上传到仓库的图片

接着我们进入终端,首先进入仓库文件夹 添加仓库文件夹下的所有文件:git add . 提交文件到分支:git commit -m “备注你提交了哪些内容” 推送到仓库:git push origin master

cd ...\imges    //具体路径请按照你的文件夹创建路径填写,我这里用...省略
git add .
git commit -m "第一次提交"
git push origin master

上传成功后可以在GitHub仓库中进行查看,选择要插入的图片,复制其路径粘贴到markdown文档中,图片插入格式如下

![text](https://gitee.com/left23333/images/blob/master/图片插入问题/text.JPG)

然而这样仍然无法显示图片,这里我们还需要将路径中的blob改为raw即可,如下

![text](https://gitee.com/left23333/images/blob/master/图片插入问题/text.JPG)
![text](https://github.com/left23333/left23333.github.io/blob/master/images/图片插入问题/text.JPG)

当图片已经被引用后,再将新的图片推送到GitHub仓库,git可能会报错,解决命令如下

git add .
git pull origin master --allow-unrelated-histories

使用以上命令后再重新进行一遍正常的推送命令就可以了