window.location.protocol使用实战图片不同浏览器显示问题解决方案

news2024/11/27 7:40:20

图片在不同浏览器可能会显示不出来个别原因分析, 如火狐浏览器协议类型会有问题 但是谷歌可以
解决方案:将写死的协议 如http换成window.location.protocol就可以了
在这里插入图片描述

前景:前台项目和后台项目有时返回的并不是图片全路径 ,有时候返回的是图片的id
需要拼接协议(http或https)+域名部分+端口部分+文件名部分(并不代表全部的组成部分)
这时候项目里会在main.js里定义好公共部分 如:

//VUE_APP_BASE_API = '/dev-api' .env.环境的文件里配置的
//main.js内容
const eLink =
  window.location.host + process.env.VUE_APP_BASE_API + "/eipe/download/";
Vue.prototype.imgMapLink ="http://" + eLink;
// 如果这里写死http可能造成有些浏览器图片显示问题
this.imgMapLink + row.picUrl 

正确写法

//VUE_APP_BASE_API = '/dev-api' .env.环境的文件里配置的

const eLink =
  window.location.host + process.env.VUE_APP_BASE_API + "/eipe/download/";
Vue.prototype.imgMapLink = window.location.protocol + "//" + eLink;
//main.js内容
this.imgMapLink + row.picUrl
//使用的时候
//相当于就是一个下载请求 不过可能返回的 是个流文件也可能是一个可读的文件比如.jpg的图片
window.location.protocol可以获取当前页面协议这样不同环境也不会影响图片显示 特别是开发环境多数是http的

流文件放到浏览器请求回来是乱码
文件或者压缩包请求回来是可读取的文件

下面介绍下普通URL的各部分组成:
http://www.epec.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name
从上面的URL可以看出,一个完整的URL包括以下几部分:

1.协议部分
该URL的协议部分为“http:”,这代表网页使用的是HTTP协议。在Internet中可以使用多种协议,如HTTP,FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符

2.域名部分
该URL的域名部分为“www.epec.com”。一个URL中,也可以使用IP地址作为域名使用

3.端口部分
跟在域名后面的是端口,域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分,如果省略端口部分,将采用默认端口

4.虚拟目录部分
从域名后的第一个“/”开始到最后一个“/”为止,是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是/news/

5.文件名部分
从域名后的最后一个“/”开始到“?”为止,是文件名部分,如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止,是文件部分,如果没有“?”和“#”,那么从域名后的最后一个“/”开始到结束,都是文件名部分。本例中的文件名是index.asp。文件名部分也不是一个URL必须的部分,如果省略该部分,则使用默认的文件名

6.参数部分
从“?”开始到“#”为止之间的部分为参数部分,又称搜索部分、查询部分。本例中的参数部分为boardID=5&ID=24618&page=1。参数可以允许有多个参数,参数与参数之间用“&”作为分隔符。

7.锚部分
从“#”开始到最后,都是锚部分。本例中的锚部分是name。锚部分也不是一个URL必须的部分

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/793875.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

接口测试进阶之数据模板

大家好久不见了。今天的文章将介绍jinja2模板在接口测试数据上的应用。 这几个月我在想,进阶系列要怎么写。 毕竟很多情况下,我觉得写技术文章和做培训一样,都会有两个结果: 1.是需要这些知识的人看不懂。 2.是看得懂的人不需要…

数值线性代数: 共轭梯度法

本文记录共轭梯度噶求解线性方程组的原理及流程。 零、预修 0.1 LU分解 设,若对于,均有,则存在下三角矩阵和上三角矩阵,使得。 设,若对于,均有,则存在唯一的下三角矩阵和上三角矩阵&#xff…

【云原生】Docker私有仓库registry

目录 1)用docker容器运行registry私有仓库服务。 2)运行私有仓库服务 3)镜像重命名(要上传的镜像名需要注明私仓的ip) 4)编辑docker配置文件(因为默认是拉取docker官方的镜像,需要重新指定) 5)其他dock…

walkRE裁剪面域内部--制作面洞

1、打开WalkRE软件,根据模板新建工程,如下: 2、绘制待裁剪区域和裁剪区域。如下: 将中间的矩形转换成面状的,如下: 3、裁剪掉中间内部的矩形,保留中间面状矩形的外部,如下&#xff1…

【算法提高:动态规划】1.2 最长上升子序列模型(TODO:最长公共上升子序列)

文章目录 题目列表1017. 怪盗基德的滑翔翼1014. 登山482. 合唱队形1012. 友好城市(⭐排序后 最长上升子序列模型)1016. 最大上升子序列和1010. 拦截导弹解法1——最长递减子序列 贪心解法2——最长递减子序列 最长递增子序列(⭐贪心结论&am…

2023年你不容错过的软件测试项目实战(APP项目实战)免费版

前言 最近很多的人都在问我有没有什么项目可以用来练手,正好我这里有一个比较适合练手的项目,那就给大家安利一下吧,废话就不多说了。 项目名称: APP项目实战 项目说明: 本项目里面包括了功能测试、性能测试、安全…

MATLAB与ROS联合仿真——实例程序搭建思路

一、基础运动控制实例程序搭建思路 1、需要完成的任务: (1)通过设定小车运动的速度及转角来控制ROS中小车运动。 (2)通过键盘输入指令控制ROS中小车运动,键盘输入w小车前行,s小车后退&#x…

[golang gin框架] 42.Gin商城项目-微服务实战之后台Rbac微服务角色增删改查微服务

一.重构后台Rbac用户登录微服务功能 上一节讲解了后台Rbac微服务用户登录功能以及Gorm数据库配置单独抽离,Consul配置单独抽离,这一节讲解后台Rbac微服务角色增删改查微服务功能,Rbac微服务角色增删改查微服务和后台Rbac用户登录微服务是属于…

Vue--Vuex

一、Vuex 概述 1.是什么 Vuex 是一个 Vue 的 状态管理工具,状态就是数据。 大白话:Vuex 是一个插件,可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如:购物车数据 个人信息数 2.使用场景 某个状态 在 很多个组件 来使…

leetCode刷题记录3-面试经典150题

文章目录 不要摆,没事干就刷题,只有好处,没有坏处,实在不行,看看竞赛题面试经典 150 题80. 删除有序数组中的重复项 II189. 轮转数组122. 买卖股票的最佳时机 II 不要摆,没事干就刷题,只有好处&…

169. 多数元素

题目 题解一&#xff1a;map集合计数 /*** map集合计数* param nums* return*/public static int majorityElement(int[] nums) {Map<Integer, Integer> map new HashMap<>();//第一个for循环将数组中的元素作为key 出现次数作为value存入map 并且key重复 就v…

代码随想录算法学习心得 48 | 583.两个字符串的删除操作、72.编辑距离...

一、两个字符串的删除操作 链接&#xff1a;力扣 描述&#xff1a;给定两个单词 word1 和 word2 &#xff0c;返回使得 word1 和 word2 相同所需的最小步数。 每步 可以删除任意一个字符串中的一个字符。 思路如下&#xff1a;整体思路是不变的。 这次是两个字符串可以相互…

OceanMind海睿思助力南京钢铁基于数字化审计为核心的全域风控管理

近日&#xff0c;中新赛克海睿思 与 南京钢铁股份有限公司&#xff08;以下简称“南钢”&#xff09;达成深度战略合作&#xff0c;携手推进企业内审数字化迈向智慧化发展。 双方将依托 OceanMind海睿思 提供业内领先的大数据平台和丰富的审计行业经验&#xff0c;积极利用先进…

《向量数据库指南》:向量数据库Pinecone备份索引教程

目录 ⚠️警告 使用集合创建备份 检查集合的状态 列出您的集合 删除一个集合 本文档描述如何使用集合备份索引。 要了解如何从集合创建索引,请参阅管理索引。 ⚠️警告 本文档使用集合。这是一个公开预览功能。在使用此功能生产负载之前,请进行充分测试。 使用集合…

一种有趣的 OTA 升级思路(基于 LoRa 通信的 OTA 固件升级的调试记录)

文章目录 1 概述2 调试之路2.1 想法2.2 函数和变量定义在绝对地址的实现2.2.1 IAR的扩展关键字2.2.2 函数的绝对定位2.2.3 变量的绝对定位2.2.4 常量的绝对定位2.2.4 .c文件的绝对定位 2.3 Bootload 共有函数的实现2.4 APP 共有函数的使用 3 注意事项4 调试坎坷之路5 补充 1 概…

学习React(四)

学习React&#xff08;四&#xff09; componentWillMount&#xff08;被放弃使用&#xff09;rendercomponentDidMountshouldComponentUpdatecomponentWillUpdate&#xff08;被放弃使用&#xff09;componentDidUpdatecomponentWillReceiveProps&#xff08;被放弃使用&#…

idea连接远程服务器上传war包文件

idea连接远程服务器&上传war包 文章目录 idea连接远程服务器&上传war包1. 连接服务器2.上传war包 1. 连接服务器 选择Tools -> Start SSH Session 添加配置 连接成功 2.上传war包 Tools -> Deployment -> Browse Remote Host 点击右侧标签&#xff0c;点击&…

【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等-在表单里拿到列表上下文onlineTableContext

【二开】JeecgBoot-vue3二次开发 前端 扩展online表单js增强等-在表单里拿到列表上下文 onlineTableContext 对应的属性方法 acceptHrefParams"<p> 跳转时获取的参数信息"currentPage"<p> 当前页数"currentTableName"<p> 当前表…

读取有重复section的ini格式文件最新的几个不同section

文件内容示例如下 可以看到文件并不是标准的 ini 配置文件的格式&#xff0c;存在很多重复的 section&#xff08;中括号里的就是section&#xff09; &#xff0c; 我的任务是读取文件末尾最新的四个不同 section&#xff0c;并发送出去。 按照读取 ini 文件那样读取显然是不…

常用API学习08(Java)

格式化 格式化指的是将数据按照指定的规则转化为指定的形式 。 那么为什么需要格式化&#xff1f;格式化有什么用&#xff1f; 以数字类为例&#xff0c;假设有一个比分牌&#xff0c;在无人得分的时候我们希望以&#xff1a;“00&#xff1a;00”的形式存在&#xff0c;那么…