首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular2:在PathLocationStrategy下重新加载页面后不显示svg

Angular2是一种流行的前端开发框架,用于构建现代化的Web应用程序。它提供了一种模块化的方式来组织和管理应用程序的各个部分,包括前端界面、业务逻辑和数据交互等。

在Angular2中,PathLocationStrategy是一种路由策略,用于处理URL的导航和页面重载。当使用PathLocationStrategy时,重新加载页面后可能会导致SVG图像不显示的问题。

这个问题通常是由于相对路径引用SVG图像而导致的。当重新加载页面时,相对路径可能会发生变化,导致浏览器无法正确加载SVG图像。为了解决这个问题,可以采取以下几种方法:

  1. 使用绝对路径引用SVG图像:使用绝对路径来引用SVG图像,确保在重新加载页面后仍然能够正确加载。例如,可以使用完整的URL来引用SVG图像,如<img src="http://example.com/path/to/image.svg">
  2. 使用基于根路径的相对路径引用SVG图像:使用基于根路径的相对路径来引用SVG图像,以确保在重新加载页面后仍然能够正确加载。可以使用Angular的APP_BASE_HREF提供的根路径来构建相对路径。例如,可以使用<img src="{{appBaseHref}}path/to/image.svg">来引用SVG图像,其中appBaseHref是根路径。
  3. 将SVG图像转换为Base64编码:将SVG图像转换为Base64编码,并将其嵌入到HTML中作为数据URL。这样可以避免使用相对路径引用SVG图像,确保在重新加载页面后仍然能够正确显示。可以使用在线工具或命令行工具将SVG图像转换为Base64编码。

需要注意的是,以上方法只是解决SVG图像不显示的一种可能的解决方案。具体的解决方法可能因应用程序的具体情况而有所不同。在实际开发中,可以根据具体需求选择合适的方法来解决该问题。

关于Angular2的更多信息,可以参考腾讯云的Angular2产品介绍页面:Angular2产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载的意义何在?Webpack 开发中间件模块热拔插(HMR)

,这个模板包含一这些方面: 服务端预加载(预渲染):这样你的UI可以快速的显示,甚至浏览器下载Javascript之前。...模块热拔插:开发期间,一旦你编辑了一个Typescript文件、CSS文件、或者其他客户端资源,你的改变也将在刷新页面的情况立即推送到浏览器。...一切就绪之后,项目中看起来可能回出现一点问题,但是实际上并不是这样,当VS2015完成安装依赖将会显示not installed ?...然后紧接着接管页面实现绑定你的那些功能,这比花很长时间加载javascript代码,让客户看到一个空白的网页好的多。...,你的应用程序将会在刷新页面的情况啊立即应用改变。

3.3K60

使用CSS提高网站性能的30种方法

“网络”面板是一个很好的起点,刷新,它会显示资源下载的瀑布图: 较长的条突出显示加载缓慢或渲染受阻的资源(如上图中的白色块所示)。...文本100ms内不可见。然后使用Web字体(如果可用)。否则,它将恢复为交换。 可选:与回退相同,只是在下载Web字体不进行字体交换。它应该出现在下一个页面加载。...但是,最好避免对触发重新布局的属性进行动画处理,例如尺寸(宽度、高度、填充、边框)或位置(顶部、底部、左侧、右侧、边距)。这会导致整个页面每个动画帧上重新布局。...异步加载剩余的CSS以避免阻塞页面的呈现。 下面的示例将剩余的CSS作为"打印"样式表,浏览器以较低的优先级异步加载。该加载代码在下载将其切换回所有媒体的标准样式表。...该确保未启用JavaScript的情况仍然加载: <!

3.4K20

CSS 20大酷刑

合成操作,将页面的绘制部分组合在一起以屏幕上显示。这通常是处理器最不密集的操作。...避免为耗时的属性制作动画 对元素的尺寸或位置进行动画处理可能会导致整个页面每一帧上重新布局。如果动画只影响合成阶段,性能可以得到改善。 这里就不得不提一,合成层的概念了....使用JavaScript异步加载主要的CSS文件(可以页面加载加载)。 这种技术无疑可以提高性能,并且可能对具有一致界面的渐进式Web应用程序或单页面应用程序有所益处。 ---- 20....「延迟加载次要资源:」 对于一些不是首要显示的资源,如下方的图像、广告、辅助内容等,可以采用延迟加载的方式,使页面更快地完成加载和呈现。...页面会更早可用,因为每个组件按顺序渲染;页面顶部的内容可以剩余内容加载时被查看。 懒加载 假设我们有一个包含多个段落的网页,我们将通过分块加载和渲染逐步显示这些段落。 <!

18830

Angular2学习笔记

而且,功利一点的讲,对于找工作的帮助可能并不是很大,很多Web相关的职务招的都是Java方向的,而我直接跳过这种传统框架直接接触新知识难免会发现基础牢的情况。...开发细节 Angular2这类MVVM架构的框架跟传统的MVC框架有很大的不同,不过主要需要考虑的就是下面这几个部分: 模板。主要是模板语言部分以及模板中使用组件的变量等等。 数据绑定。...包括属性绑定、事件绑定、插值绑定以及双向绑定,主要用于组件内的变量页面中的显示以及页面等。 服务。这包括两方面,一个是访问RESTFUL的服务,另一个是用来保存本地变量的。...项目发布 如果是测试环境,直接ng serve就可以用node服务器本地的默认4200端口显示页面了。...这是由于Angular2默认使用的是JIT(Just-in-Time - JIT)编译。这个JIT编译有他的好处,他意味这我们的代码是客户端解释的,那么他编译的效率会比较高,编译的结果会更好。

2K10

为什么现在的开发者总是拿 Vue.js 和 JavaScript 巨头 Angular、React 比较?

但是,去年 Vue.js 互联网上声势浩荡地掀起了千层浪,已经显示出了足够的优势,并且 Angular 和 React 力不从心的一些场景,Vue.js 已经成为了潜在的备选项。...Angular2 使用“组件”替换掉了之前的“控制器”。 Angular2 JavaScript 舞台上俨然已经成为了一个大腕儿,但是某些场景,Vue2.0 仍然个更好的选择。...主流的虚拟 DOM 操作会引起重新渲染、依赖优化等问题。...生产环境 Vue 表现同样更好。开发环境 Vue 处理高帧数据可视化或动画可以达到每秒 10 帧,而 React 只能达到每秒 1 帧。主要原因是开发模式 React 固定不变的检查方式。...这是 vuejs.org 发布的一个基准测试,数据显示 Vue 的渲染系统比 React 更快。

1.9K30

图标字体应用实践

验证Chrome同时加载个数的html–很多张很大的图片 然后Chrome的开发者工具里面的Timeline可以看到Chrome确实是6个6个加载的,每次最多加载6个: ?...坑1:图标字体只支持单路径 通常情况,设计师制作图标的时候是用多个路径组合出来的,在上面的导出的svg也是带有多个路径的,打开svg文件就可以知道,它是由几个path组成的: ?...注意缓存 后续加了新的图标字体,如果不做处理的话,已经加载过的浏览器可能会有缓存,导致新的图标字体不会重新下载,所以需要处理这个问题。...如果实再是要使用多色的图标,甚至带一些特殊效果的那就使用SVG吧。 结合使用SVG 对于多色的图标,可以页面插入一个SVG: ?...借助jsp嵌套svg 这样做的缺点是浏览器没办法缓存,同时会阻碍页面加载。优点是由于是内联的,可以直接用CSS控制svg的样式 2.

2.2K20

面试总结:移动web设计与开发

autoplay为表示音频和视频加载完成自动播放,默认为设置;loop为表示音频和视频播放完成再次重复性播放,默认为设置;muted为表示音频输出为静音;preload三种值,设置为auto,表示预加载音频和视频...,设置为metadate,表示为预加载音频和视频的元数据,如大小,时间等,设置为none,表示为执行预加载。...video的专有属性,poster为设置视频加载完成播放前显示的图片,属性值为图片url,width为设置视频播放器的宽度,height为设置视频播放器的高度。...play()方法用来播放音频和视频;pause()方法用来暂停音频和视频;load()方法用来重新加载音频和视频;canPlayType()方法用来判断支持的type类型。...SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 SVG是一种基于XML的矢量图形格式,用于Web和其他环境中显示各种图形;它允许我们编写可缩放的二维图形

1.5K20

【开发指南】(三)认识ionic3

js实现,然后通过js桥接,使用原生界面渲染,也就是说,它比第一代增强了页面显示的功能,等到第三代了,通过编译时把js桥接部分也省掉,直接生成原生可执行的代码,把性能又提高了一个档次。...由于AngularJS 1.x版本性能上已经很难有较大提升,后来微软和google联合推出了全新设计的基于TypeScript的Angular2,这是对于原始版本完全的重写。...,其它变化不大,具体更新如下: Angular 4.0 新的版本,改进 AOT 编译器,分离 animations 包,缩小生成的代码量,运行更快,改进ngIf 和ngFor 等具体内容可以访问...并且可以更轻松的项目中设置延迟加载,设置延迟加载页面的优先级,并为每个页面自定义配置。...懒加载 Ionic3.0版本开始,支持了延迟加载,我们可以将某些模块设置为延时加载,只有用户打开相关的页面的时候,这个模块所在的js才会被下载,这样能减少用户初次下载的文件的大小。

2.7K40

使用相交观察器和SQIP进行渐进式图像加载

左侧的屏幕截图显示了首次加载低质量图像时的页面,然后右侧的屏幕截图显示页面完成加载页面,并显示了完整的质量图像 这种图像加载技术被称为LQIP(低质量图像占位符),几年前由Guy Podjarny...这种技术背后的想法是,连接速度较慢的情况,你可以尽快向用户展示完全可用的网页,为他们提供更好的体验。即使更好的网络连接上,这仍然为用户提供了更快的可用页面,并且体验得到了改善。...这种方法的问题在于,它迫使浏览器重新布局整个页面,并且某些情况会引起相当大的麻烦到你的网站。我们可以使用相交观测器做得更好 本文中,我将着重介绍这种延迟加载技术的基础知识 好吧,让我们开始吧。...首先,我们页面加载加载dog.svg图像,这是我们的低质量图像。接下来,我们使用一个名为data-src的数据属性指向全质量图像源。我们将使用它来尽快替换低质量图像和全面质量的图像。...尝试SQIP很有趣,其实这种做法就是首屏加载图像时,以低质量模糊图像加载过渡到清晰图像,体积上,经过SQIP处理,与实际图片比较起来,可以看出容量还更小,更多的做法,从各个网站上看出,他们的处理方式都很类似

1.8K20

建站小技巧|如何安装favicon.ico

对于支持 PNG favicon 图标格式的浏览器,通常在浏览器选项卡或书签栏中显示的 favicon 的质量将高于 ICO 格式。PNG 格式的缺点是它与 IE5 ~ IE10 兼容。...SVG - favicon.svg SVG 格式优于 PNG 和 ICO 格式,但大多数浏览器都不支持。SVG 文件非常轻量级,并且可以无限扩展,图像质量高,而且没有大图片加载消耗时间长的问题。...manifest一旦设置,浏览器便会将需要缓存的文件保存在本地,这样当用户在下一次访问时,即使是没有网络连接的情况也能够正常显示页面内容。...manifest文件中,除CACHE声明哪些文件被缓存外,还有NETWORK和FAILBACK这两个关键字,分别用于声明哪些文件永远不被缓存,以及无法建立连接的情况显示的回退页面。...manifest主要适用于不依赖网络,且下载不需要再次更新的页面、应用、HTML5游戏,需要频繁或偶尔更新内容的页面中要慎用manifest 8、如何把Favicon文件上传到网站服务器根目录

95730

Angular2 VS Angular4 深度对比:特性、性能

这个Angular版本更加注重于开发移动应用程序,开发人员可以使用它创建跨平台的应用程序,解决了移动应用程序(功能,加载时间等)的挑战后,Angular2可以更容易的处理桌面组件。...动态载入: 这是之前的Angular版本均不具备的功能,Angular2包含了这个功能,即使开发人员忙碌时,也能够添加新的指令或控件。 模板: Angular2中,模板编译过程是异步的。...由于代码依赖于ES6模块,因此模块加载程序将通过部分组件上引用它们,来加载依赖关系。...此外,它的异步字符允许开发人员管道中,实现对用户进行身份验证或加载控件信息的服务器请求。...这意味着如果开发人员不需要使用动画,就可以创建这些额外的代码。 这个功能还能够帮助更方便的查找docs文件和使用自动完成功能。

8.7K20

从龟速 11s 到闪电 1s,详解前端性能优化之首屏加载

纷纷反馈在这样的弱网条件,访问新项目时,加载了近1分钟都没加载出来,而访问其他页面顶多也就30-40s。...依赖不多的情况这么处理确实有助于提升加载速度,但一旦依赖多起来,vendor就会特别的大,弱网条件,会严重拖慢页面显示。...这种做法 直观,每次都得去iconfont复制名称使用 每次增删改图标需要重新替换整个JS 不能按需加载,没使用到的也会一起打包,特别是UI换图标时一般不会将旧图标删除.......添加自定义SVG友善,必须上传iconfont添加到一起再下载 更优的SVG玩法 新增/修改图标 iconfont下载UI上传或者其他地方找的任意SVG图标放入icons/svg/ 页面中使用全局...简单粗暴,弱网条件很有用 几种方式可以同时搭配使用 渐进/交错格式图片会占用一定CPU和内存,酌情使用 路由跳转Loading动画 内容(点击展开/收起) 弱网优化手段,用了懒加载后用户如果在弱网条件点击下一个页面在下个页面加载完成前页面内容不可用

2.4K10

angular5面试题_大数据面试题

顺便科普一,Angular最早期的版本,也叫AnugularJS,使用javascript开发;新的版本,才叫Angular,也称为Angular2,使用typescript开发,Angular和AngularJS...是兼容的(当然也有2个版本的集成方案)。...主要优点 由于应用程序是浏览器内部运行之前进行编译的,因此浏览器会加载可执行代码并立即呈现应用程序,从而加快了呈现速度。...-- 3.绑定方法调用的结果 --> 直接绑定: 大多数情况,这都是性能最好的方式。 绑定方法调用的结果:每个脏值检测过程中,classes方程都要被调用一遍。...Module 延迟加载(Lazy-loading) 当一个项目做得很大,为了提高首屏加载速度,可以通过Lazy-loading,当访问到某些具体的url时,才加载那些不常用的feature module

4.3K20

HTML5 新特性_CSS3新特性

height pixels 设置视频播放器的高度 loop loop 如果出现该属性,则当媒介文件完成播放再次开始播放 preload preload 如果出现该属性,则视频页面加载时进行加载...视频的元数据已加载,其他属性才可用 四.HTML5 音频: 1.Web 上的音频: (1)大多数音频是通过插件(比如 Flash)来播放的。...,则向用户显示控件,比如播放按钮 loop loop 如果出现该属性,则每当音频结束时重新开始播放 preload preload 如果出现该属性,则音频页面加载时进行加载,并预备播放...(5)SVG 可在图像质量不下降的情况被放大 3.把 SVG 直接嵌入 HTML 页面: <!...当 manifest 文件加载,浏览器会从网站的根目录下载这三个文件。

5.4K30

【开发指南】(六)Ionic3从目录结构理解开发

首先,我们主要的工作目录是src目录,开发的90%以上的工作量都集中在这个目录上,在里面就是用angular2或以上的技术去书写html模版、样式和脚本(有面向对象开发经验的很容易上手),开发完成通过...ionic的命令行生成为原始的静态html页面,并存放在www目录(见上图所示),也就是说www开发过程中是不需要理的,可以任意删除。...当我们想打包app时,命令行执行打包指令会生成一个调用浏览器插件的原生项目,同时把www目录拷贝到项目中,浏览器插件的入口网页指向www的index.html,从而在app中实现本地浏览网页的效果,其中页面和脚本等因为是本地的就不需要网上加载...,在数据加载过程中就已经可以看到页面,等数据加载完成自动局部刷新页面即可,这就是ionic的运行机理,也是混合式应用的其中一种常见套路。...而压缩打包混淆等都是ionic框架内部处理了,所以我们只需专注于页面的实现,那最最简单的开发步骤就是,pages里面新建一个页面,写好逻辑,然后app.module.ts添加配置即可。

2.7K10

kbone 中实现小程序 svg 渲染

最初我们只能简单的用 Babel 进行 JS 的转换;后来小程序推出了 web-view 组件,开发者则开始想办法让 Web 页面使用小程序能力;知道了 web-view 中的消息不能实时传到小程序逻辑层...每个页面的 JS 中初始化 kbone,为逻辑层提供虚拟 DOM 和 BOM 的环境,然后就可以像 H5 一样加载各种主流前端框架和业务代码,kbone 会负责逻辑层和视图层之间的 DOM 和事件同步...一些大型 web-view 项目迁移到 kbone 的过程中,常常会遇到 HTML inline SVG HTML 中直接插入 SVG 标签)这种情况;有的页面还会异步加载一个含有很多小图标()的大 SVG页面上用 的方式,实现 SVG 的 Sprite 化。... Android 和 iOS 真机调试中,本例没有出现无法显示的兼容问题,这也说明了这种方案可行。

2.1K00

ionic3应该善用组件和指令

angular1时代,组件和指令是一回事,即严格来说,没有组件这概念,只有指令,而到了angular2时代,虽说组件仍是一种特殊的指令,但已经有一定目的明显区分开来,分别用Directive和Component...this.el.nativeElement.style.backgroundColor = 'red'; } } 基于安全性考虑,angualr2的文档是建议用Renderer来代替ElementRef使用,有兴趣的可以自行了解下Renderer 3)使用指令 如果调用的页面用了懒加载...,调用指令的页面module.ts里导入指令并声明,反之,app.module.ts里导入指令并声明,这样调用的组件就能识别该指令了: import { BgColorDirective } from...自定义结构指令 实例:山寨一个*ngIf的的收缩显示指令,仅为了起到抛砖引玉效果。...content-empty.html' }) export class ContentEmptyComponent { @Input() btnWorkText: string = ''; //加载成功按钮文字

3.5K40
领券