图床、本地图片、web图片

图片的在线使用

由于有些资料是以图片、视频、音频等非文本形式存在，在写blog的时候也需要一些非文本展示，所以非文本的展示还是急需的。前面已经设置过图床CLOUDFLARE了，而在线图床、本地图片、web图片如何一起快速的使用也是非常值得记录一下

本地图片

本地图片作为源头，需要在本地上良好的组织，也起了一个备份的作用，以防图床挂了，可以快速迁移。假设blog里的图片的集中放在D:\work\web\blog\assets\img里面

图床

因为图床，这里以S3类型为例，上传的目录是自己随便定的，为了统一，定义成/blog/assets/img/，域名是固定的，这里CLOUDFLARE里我的域名指定为https://cdn.gaoyuhui.com

web图片

web中要引用图床的图片地址，因为固定地址可以在博客引擎了设置，这里设置成https://cdn.gaoyuhui.com/blog/assets，所以，要在web程序里引用图片，以abc.jpg为例子直接引用本地路径/img/abc.jpg就相当于引用了https://cdn.gaoyuhui.com/blog/assets/img/abc.jpg，非常方便，也非常容易对号

捋一下

根据上面逻辑

1. 假设有一图片abc.jpg，将此图片放在本地D:\work\web\blog\assets\img 文件夹中

2. 同步本地文件夹D:\work\web\blog\assets\img和图床目录https://cdn.gaoyuhui.com/blog/assets/img/

3. 将web程序性引用assets规则的前缀设置成https://cdn.gaoyuhui.com/blog/assets

4. 在web页面直接引用/img/abc.jpg

这样通过同步本地图片和图床目录，直接引用本地目录下的图片就可以直接引用图床同名图片了，

而且，如果图床挂了，也可以把本地的目录直接迁移到其他图床，把web程序的引用地址替换成新图床，整个web就完整复活了.

audio和video

上面为什么引用图片要加/img，而不是直接引用图片名呢？因为还有其他类型，比如音频，直接用/audio，视频直接用/video来引用，这样本地和云端存储也有良好的目录和组织，使用也会有良好的习惯. 妈妈再也不用担心我的文件不好用了