1、不知道大家有没有遇到同样的问题,后台接口传来的图片资源有带http的资源前缀,也有三方库返回的不带http资源前缀,而且后台换一次人,多张图片资源有传字符串用逗号分隔的,也有用数组格式传的,而且多张图片同样有带http,也有不带http的,且该问题往后上传的图片同样存在这个问题(原因是移动端和后台管理传的时候没做统一),之前同事简单封装老出问题,后来自己重写方法,方法如下:
2、注意事项:该方法如果在html部分调用,可能会出现在imgUrl资源加载完成之前调用,就会执行最后else部分console.log(‘函数urlProcessingW未传入任何参数’),等imgUrl资源加载完成即再次执行可正常显示,
3、该方法可接收字符串类型或者数组类型,默认返回数组,
4、路径资源若是字符串类型有逗号且返回类型不是arr,时需要自己补充了。
const baseUrlW = 'http://xxxxx.com';
const urlProcessingW = function(imgUrl, backType = 'arr') {// backType 为可选参数,函数返回数据的数据格式
if(imgUrl !== undefined) {
//类型为字符串且不为空
if(typeof(imgUrl) === 'string' && imgUrl !== '') {
//字符串中有,号
if(imgUrl.indexOf(',') !== -1) {
//有逗号且返回类型为arr (默认或传来)
if(backType === 'arr') {
return imgUrl.split(',').map((url) => {
if(url.indexOf('http') !== -1) {
return url
}else {
return baseUrlW + url
}
})
//有逗号且返回类型不是arr,想要啥格式自己补吧
}else {}
//没有,号
}else {
//没有,号且返回类型为arr
if(backType === 'arr') {
//是否有http头
if(imgUrl.indexOf('http') !== -1) {
return imgUrl.split(',')
}else {
return (baseUrlW + imgUrl).split(',')
}
}else {
return imgUrl.indexOf('http') !== -1 ? imgUrl : baseUrlW + imgUrl
}
}
//imgUrl 为数组
}else if(Array.isArray(imgUrl) && imgUrl.length !== 0){
return imgUrl.map((url) => {
if(url.indexOf('http') !== -1) {
return url
}else {
return baseUrlW + url
}
})
}else {
//除字符串及数组类型处理可在此进行
}
}else {
console.log('函数urlProcessingW未传入任何参数')
}
}