图片url处理(带http和不带http)方法

后端返回的接口数据,图片路径,有的是相对路径,有的是带http的路径

得处理一下,如果是相对路径就拼上服务器的地址(xxx),如果是带http的路径就正常显示

方法:

javascript 复制代码
imageUrl(url){
  let str = RegExp('http');
  let newUrl;
  str.test(url) ? newUrl = url : newUrl = xxx + url;
  // xxx就是需要拼接的地址
  console.log(newUrl);
  return newUrl
}

测试了一下,一个是相对路径(/static/img/logo.png),一个是带http的路径

打印出来是没问题的

javascript 复制代码
var imgSrc = '/static/img/logo.png'  
// www.xxx.com/static/img/logo.png

var imgSrc = 'https://img-home.csdnimg.cn/images/20201124032511.png'
// https://img-home.csdnimg.cn/images/20201124032511.png

// 调用
this.imageUrl(imgSrc)
相关推荐
爱滑雪的码农2 小时前
详细说说React大型项目结构以及日常开发核心语法
前端·javascript·react.js
@大迁世界3 小时前
43.HTML 事件处理和 React 事件处理有什么区别?
前端·javascript·react.js·html·ecmascript
代钦塔拉4 小时前
Qt4 vs Qt5 带参数信号槽的连接方式详解
开发语言·数据库·qt
ZC跨境爬虫4 小时前
跟着 MDN 学 HTML day_38:(DocumentFragment 文档片段接口详解)
前端·javascript·ui·html·音视频
@大迁世界5 小时前
41.ShadCN 是什么?它如何和 Tailwind CSS 集成,从而更容易构建可访问且可自定义的 React 组件?
前端·javascript·css·react.js·前端框架
InfinteJustice6 小时前
踩坑分享C 语言文件操作全攻略:从基础读写到随机访问与缓冲区原理
c语言·开发语言·microsoft
码云数智-大飞6 小时前
滥用Lombok的@EqualsAndHashCode导致线上事故复盘
开发语言
yong99906 小时前
C# 实时查看硬件使用率(CPU 内存 硬盘 网络)
开发语言·网络·c#
不午休の野猫6 小时前
vs + qt环境编译.sln项目时报无法解析的外部符号metaObject && qt_metacast
开发语言·qt
吴声子夜歌7 小时前
Java——接口的细节
java·开发语言·算法