原图床方案

原先使用GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床 (opens new window)的图床方案，具体配置细节里面都有，这里就不说了。

这里说一下我个人实际使用场景：

• VSCode 进行博客的编写
• TinyPNG 进行图片压缩
• PicGo 进行图床管理，获取图片地址后再写到博客里

这样当我需要开发的同时加入图片，我就需要 打开VSCode进行编辑，打开TinyPNG进行压缩，再打开PicGo进行管理，流程如下：

编辑博客 -> 获取图片 -> 打开TinyPNG进行压缩 -> 下载压缩后的图片 -> 打开PicGo进行管理 -> 复制图片地址 -> 粘贴到博客里

问题

软件多

我需要打开两个软件 + 一个网页（当然本身预览博客也是要打开网页的），在它们之间来回切换，效率较低。

过程繁琐

图片获取到之后，先传入TinyPNG进行压缩，再传入PicGo进行管理，这样就需要三次操作，效率较低。图片最终的存放的位置是github，只需要一个地址就可以。但是在压缩过程中会多产生一个图片，造成冗余。

且若我使用的图片不合适或者需要更换，需要到github去操作，上传后的图片名称也无法修改。

本地调试不方便

图片需要传到github之后，本地调试才能看到效果，这时再想换图，就比较麻烦了。

本地调试使用网络图床，这样图片加载的也慢。

新图床方案

用 VSCode 直接管理图片仓库，使用 TinyPNG 插件 进行压缩，省去图床软件的使用。TinyPNG 插件在压缩图片是可以直接选择强制替换原图，不会产生多余的图片。

之前的图床方案，需要上传再使用，新方案，可以在使用的项目中，引入本地图片地址，最后整体提交图床中的图片，图片的修改替换也十分方便。

本地项目使用本地图片方案

由于博客项目运行时，不会打入另一个项目的图片作为静态资源，需要借助一个本地图片服务器来解决。

cd 图片目录
http-server -p 8090

运行起来之后，就可以使用本地图片了。

下面是一个图片封装组件，在本地时使用 http://127.0.0.1:8090/tech-blog/img.jpg 本地地址，发布到线上，使用 jsDeliver 托管的线上地址。

<template>
  <div :align="align">
    <img :class="{'g-img': true, 'error': showError }" v-bind="binds" :src="imgUrl" @error="handleImgError">
  </div>
</template>

<script>
export default {
  name: 'Img',
  props: {
    src: String,
    name: String,
    h: {
      type: String,
      default: "250",
    },
    w: String,
    align: {
      type: String,
      default: 'center'
    }
  },
  data () {
    return {
      showError: false,
      baseUrl: '',
    }
  },
  computed: {
    binds () {
      const ret = {}
      if (this.h) ret.height = this.h
      if (this.w) ret.width = this.w
      return ret
    },
    imgUrl () {
      return this.src ? this.src : (this.baseUrl ? this.baseUrl + this.name : '')
    }
  },
  created () {
    try {
      this.baseUrl = window.location.href.includes('localhost') ? 'http://127.0.0.1:8090/tech-blog/' : 'https://gcore.jsdelivr.net/gh/GuoLiBin6/images/tech-blog/'
    } catch(err) {
    }
  },
  methods: {
    handleImgError (error) {
      this.showError = true
    }
  }
}
</script>

<style scoped>
.g-img {
  border-radius: 5px;
  box-shadow: 0 0 1px rgba(125, 125, 125, 0.1);
  border: solid 1px #eee;
}
.g-img.error {
  display: inline-block;
  transform: scale(1);
  content: '';
  color: transparent;
  width: 150px;
  height: 150px;
}
.g-img.error::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: #f5f5f5 url(<base64图片>) no-repeat center / 50% 50%;
}
.g-img.error::after {
  content: attr(alt);
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  line-height: 2;
  background-color: rgba(0,0,0,.5);
  color: white;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

至此，一个 VSCode 就可以完成博客编辑、图片管理、图片压缩、博客发布等所有功能了。