weixin_39933026
weixin_39933026
2020-12-08 23:55

图床教程

图床教程

为什么要使用图床?

一般 MarkDown 添加的图片都储存在本地,本地图片的修改、删除、重命名甚至路径改变都会让图片失效。

图片永不失效的方法是上传图片至图床,图片的储存位置在互联网上,那么,无论在什么情况下,你的 MarkDown 文件,甚至将 MarkDown 转换成的 html 文件在任何电脑中都能正常显示打开。

对于个人博客搭建、微信公众号的运营、邮件的图片显示,图床都是很方便的工具。

图床的原理

理解图床的原理能帮助我们更好的理解哪些工具能做图床,以及怎么用它们做图床。

图床教程02

这里我举一个例子吧:发一张含图片的朋友圈。

简单看看发朋友圈的流程:

  1. 选中图片
  2. 添加文字 或者 不添加文字
  3. 点击发送

不过,一旦你这条朋友圈发出去,你把本地发朋友圈的那张照片删掉。朋友圈里那张照片会不会消失?

朋友圈的照片并没有消失,对吗?其实,当你发了朋友圈之后,那张照片就已经上传到微信的服务器上了,它获得了一个互联网的地址。

譬如像这样:http://zh.mweb.im/asset/img/set-up-git.gif

这张图片看起来是这样的: GitHub小女孩 图来自 GitHub

回到你发的朋友圈的照片,那张存储在微信服务器上的照片,只是你不知道它的互联网地址,如果你能获取到它的网络地址,就可以随时引用到这张照片了。

在 MarkDown 中引用照片的语法为


![照片描述,可不填](图片的本质地址或者图床的url) 
// 譬如刚刚的GitHub小女孩,引用方法:
![GitHub小女孩](http://zh.mweb.im/asset/img/set-up-git.gif)

注意:请在英文输入法输入![](),否则无法调用。

哪些工具能做图床?

说的简单点,所有能上传图片功能的站点,几乎都具有作为图床的先天优势。

图床教程01

新浪、QQ、微信、千牛、 Github 等都支持图床,如果你会折腾,百度云也可以作为你的图床。

从个人角度出发,不建议大家把免费网站(譬如:新浪 Github 等)作成自己最常用的图床,尤其是在自己图片使用率特别高的情况下。

原因有两点:

  1. 免费网站,尤其是大型网站,树大招风,容易被攻击,你的图片储存的 安全性得不到保障 ,有可能别人网页一崩溃,站点一关,你的站点图全挂了。
  2. 免费网站的流量也是大公司自己出钱的,上传自己的图片方便了自己,慷他人之慨,从道义上来说,也不太好吧。

虽说多上传一两张图片不会让一家网站直接由盈利变亏损,但是这么干毕竟不好。

怎么获取图床的链接?

常见方法:

  1. 从搜图网站获取URL
  2. 从特点网页获取URL

网站获取

Google program看中了第二行第四张图:

网页图_图床02

点击图片,右键单击,选复制图片地址

网页图_图床01

得到:https://partnercenter.force.com/s/embedded_program_circle_icon.png.png?v=1

结合![]()我们看看效果:

网页的获取

我以老师的 第三次作业 为例:

提示:这里是网页版的新生大学

新生大学_作业图03

下方有两张图,我们来取第一张图的地址

新生大学_作业图02

右键以后,选择 复制图片地址 新生大学_作业图01

得到这个:https://o3b126ie1.qnssl.com/avatar/cfd85e5c-a645-4141-82ca-29d69d4c032d

结合![]()我们看看效果:

PS : 同学们不要把 新大 当图床用了~~徐老师,莫打我 ಥ_ಥ

利用 Github 图床

在第一课,就听老师说过:图床必须使用 Github 图床,相信在 Github 网页上, Github 图床,更稳定读取更快。

但是 Github 为了不让你把它当作图床用,还做的挺好的,现在以我自己做的图床为例吧。

1. 新建respository

你需要先 new 一个 respository,这个相信大家都会了,我建立的项目名为 sample_picture。

ne

2. 添加图片到 respository

建立本地存储图片的仓库


 >  git clone 你的项目url

在本地文件夹放入你的图片

目录文件


>  git status
>  git add -A
>  git commit -m "你的提交说明"
>  git push origin master

push 图片到 respository

代码块

然后我们回到项目中去看:

sample_picture01

就只有一张照片,点击: sample_picture06

3. 方法一:获取图片地址

右键 >> 复制图片地址 sample_picture04

拿到这个:

https://github.com/xiaochaogezaici/sample_picture/blob/master/new.png?raw=true

结合![]()我们看看效果:

4. 方法二:下载图片地址

除此以外,点击右上角的 download 进入页面: sample_picture02

sample_picture03

你会获得一个 https : //raw 开头的网址如下 https://raw.githubusercontent.com/xiaochaogezaici/sample_picture/master/new.png

结合![]()我们看看效果:

自此,你就获得了把 Github 作为图床的能力了。

注意:

  1. 在 respository 更新图床文件时,一定慎用 git add -A,如果你的图片不在本地,这样也会删除云端的图片,使得云端图片的地址失效。
  2. 使用 GitHub 做图床,推荐使用git add 文件名的形式,譬如git add new.png;
  3. 更新图床前,请认真检查你的本地目录是否合适。

利用千牛作图床

千牛是付费的图床服务,我相信,它在数据的保密上以及图片的安全性上很少出问题。新用户有 1 G 免费存图的空间,估计够我折腾一年的。

虽然徐老师一直说让我们学编程不花钱,在 ulysses 开始订阅收费后,我转战 MWEB 作为 MarkDown 的写作工具,同时它支持千牛的上传服务。

具体的 MWeb 的使用以及千牛的绑定,我给出教程,大家可以看一看:

文章说明

  1. 千牛图床在 MWeb 的配置说明 你就可以和我一样批量上传,批量修改 md 文件了

  2. Markdown 语法和 MWeb 写作使用说明 Markdown 入门指南,写的最全面的,可以当教材、字典用,不会就查,我自己复制了一份在备忘录里,随时查

  3. Markdown 語法官方說明繁體中文版 小白认识什么是 Markdown ,我承认有点枯燥

截张图图给大家晒晒我现在怎么上传图床,一个字 —— 爽!

sample_picture05

利用微博作图床

ipic的使用 https://sspai.com/post/36275 使用新浪微博图床 http://www.jianshu.com/p/55fd50f289c3

跨域访问被拒绝是什么鬼?

或许你最近能正常打开图片,过一段时间就打不开了。最典型的就是 QQ 空间、百度贴吧等。

这张图其实就是传说中的 跨域访问被拒绝 跨域访问被拒绝

为什么会出现跨域访问被拒绝呢?

譬如 QQ 空间 的后台服务会去坚持发起图片访问的域名是不是 qzone.qq.com ,如果不是,就可能把你的 IP 加入黑名单。

这张图片会打不开,但是图片地址是对的,所以从图片地址去拷贝,就能获得正确的 url 。

我相信,现在你能看懂 为什么能恢复这些打不开照片了:http://jingyan.baidu.com/article/4d58d541db36959dd4e9c0cb.html

为什么要这样?

试想,微博把 QQ 空间 当作图床,用别人的服务器给自己挣钱,这事,腾讯不干!

我们该怎么做?

右键 >> 复制图片地址

悄悄的我走了, 正如悄悄的来, 右键复制图片地址, 只带走这张图片

整理 by 小超哥 如果有任何问题,欢迎你随时和我交流~~

该提问来源于开源项目:xugy0926/getting-started-with-javascript

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • weixin_39933026 weixin_39933026 4月前

    看到之前有一个图床的 issue ,而我自己花了时间学,希望对大家有帮助,一个教程写了三个小时,对自己的效率也表示很尴尬 ಥ_ಥ

    点赞 评论 复制链接分享
  • weixin_39933026 weixin_39933026 4月前

    感谢徐老师,更新了 跨域访问被拒绝是什么鬼?也算是学到了

    点赞 评论 复制链接分享
  • weixin_39736547 weixin_39736547 4月前

    如果方便的话~~把这篇文档发个pr给我放在topic里吧:)

    点赞 评论 复制链接分享
  • weixin_39933026 weixin_39933026 4月前

    已 pr

    ٩(˃̶͈̀௰˂̶͈́)و

    点赞 评论 复制链接分享