项目后期增加 oss功能 图片地址怎么处理

2022-07-25,,,,

半路接手项目,发现代码质量不是特别好,后期增加了对象存储,所以后台返回的图片地址可能包含有相对地址的和绝对地址的,但是前台不是特别好处理,甚至特别麻烦。
我只能把: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加到过滤条件里面,突然想到是不是直接加入过滤httpshttp..就可以的时候,突然想到一些其他的想法,万一有一个憨批会放入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;
	}
}

本文地址:https://blog.csdn.net/qq_41986908/article/details/112560024

《项目后期增加 oss功能 图片地址怎么处理.doc》

下载本文的Word格式文档,以方便收藏与打印。