注:DCloud是禁止使用阿里云空间搭建图床类业务的,所以这个搭起来大家自用就ok了,不用泛滥,到时候大家都没得用
这个存图片的好处在于图片实际存在阿里云的oss,同时带cdn,所以他是支持阿里云oss的图片链接参数处理的,这就很nice了,图片处理文档如下
- https://help.aliyun.com/document_detail/44688.html?spm=a2c4g.11186623.6.741.21374981derH8a
实现的效果预览
开始搭建
第一步:准备一个已经实名过的Dcloud帐号,并安装HBuilderX编辑器
第二步:下载源码并解压
源码下载地址:
- https://vkceyugu.cdn.bspapp.com/VKCEYUGU-981d04e0-60c4-4de7-b9ce-9c04d619ae80/75cf2966-4845-4158-8e93-3b6f2216bdbc.rar
第三步:打开HBuilderX编辑器
选择工具,插件安装,安装如下图所示的插件
然后点击前往插件市场,安装sass和less插件
第四步:导入项目
选择文件,导入,从本地目录导入
导入完成后,在uniCloud文件夹上右击,选择关联云空间或项目
然后点击新建,这里会跳转到unicloud的web控制台,输入一个合适的名字,点击创建
创建好后点击前端网页托管,点击开通,到这里你可以绑定自己的域名,也可以直接用默认域名
点击跨域配置,输入你刚刚绑定的自己域名或者默认域名
然后返回HBuilderX编辑器,点击刷新按钮,选中你刚刚创建的云服务空间,点击关联
关联好后点击manifest.json,选择基础配置,点击重新获取appid
然后点击发行,网站-pc,在网站标题设置你的名字,勾选前端网页托管和你刚刚创建好的云空间的名字,点击发行
等待片刻,发行完成后就可以使用了。我是用的默认域名,如下
最终成品
同一张图使用链接参数实现不同效果
原图
- https://www.nbmao.com/wp-content/uploads/2021/07/582be-36d2d5eb-11cb-4cce-b14e-c19812e56d3f.jpg
限制宽高
- https://www.nbmao.com/wp-content/uploads/2021/07/582be-36d2d5eb-11cb-4cce-b14e-c19812e56d3f.jpg?x-oss-process=image/resize,m_fixed,h_100,w_100
图片加水印
- https://www.nbmao.com/wp-content/uploads/2021/07/582be-36d2d5eb-11cb-4cce-b14e-c19812e56d3f.jpg?x-oss-process=image/watermark,text_SGVsbG8gV29ybGQ
文章评论
猫大,那个加锁的文章,想看下呢,现在服务器貌似异常了,是不是和这个有关呀
怎么打开这些图仍然是原图?
https://www.nbmao.com/wp-content/uploads/2021/07/582be-36d2d5eb-11cb-4cce-b14e-c19812e56d3f.jpg?x-oss-process=image/resize,m_fixed,h_100,w_100
https://www.nbmao.com/wp-content/uploads/2021/07/582be-36d2d5eb-11cb-4cce-b14e-c19812e56d3f.jpg?x-oss-process=image/watermark,text_SGVsbG8gV29ybGQ