项目后期增加 oss功能 图片地址怎么处理
半路接手项目,发现代码质量不是特别好,后期增加了对象存储,所以后台返回的图片地址可能包含有相对地址的和绝对地址的,但是前台不是特别好处理,甚至特别麻烦。
我只能把:src=
的参数用imageUrl
函数处理一下,以后如果出现问题的话就整体解决函数的问题就好了。
最开始后台给我说只需要把包含ossUrl
的内容输出原始内容,不包含的输出增加原始URL的连接就可以。
function imageUrl(url){
var ossUrl = "https://xxxxx.oss-cn-beijing.aliyuncs.com";
if(url.indexOf(ossUrl) == -1){
return "http://xxxxx.com" + url;
}else{
return url;
}
}
修改完成之后发现一些存在本地的图片没了,我发现之前的前端,在data中也有一些图片连接,我又一次处理了函数,增加了过滤包含..
的路径。
function imageUrl(url){
var ossUrl = "https://xxxxx.oss-cn-beijing.aliyuncs.com";
if(url.indexOf(ossUrl) == -1&&url.indexOf('..') == -1){
return "http://xxxxx.com" + url;
}else{
return url;
}
}
后来我又发现,有些头像是直接获取得微信的头像,于是又出现了https://thirdwx.qlogo.cn/***
的url,我刚准备吧这个url加到过滤条件里面,突然想到是不是直接加入过滤https
、http
和..
就可以的时候,突然想到一些其他的想法,万一有一个憨批会放入ftp://***
的内容该怎么处理。
最后我直接把://
和..
过滤了,就形成了下面的代码:
function imageUrl(url){
var ossUrl = "https://xxxxx.oss-cn-beijing.aliyuncs.com";
if(url.indexOf('..') == -1&&url.indexOf('://') == -1){
return "http://xxxxx.com" + url;
}else{
return url;
}
}