Angular 2+应用Chrome警告：data URI未转义#已弃用，如何定位？

我之前在Angular项目里碰到过一模一样的问题，给你分享几个定位和解决的实用思路：

一、精准定位问题代码 #

Chrome没直接指向源码位置确实闹心，但可以用DevTools的全局搜索来揪出所有问题：

• 打开Chrome DevTools（按F12），切换到Sources标签页
• 按下Ctrl+Shift+F（Windows）或Cmd+Shift+F（Mac）开启全局搜索框
• 输入搜索规则：data:[^"]*#[^"]*，这个正则能匹配所有包含未转义#的data URI
• 搜索结果会列出所有匹配的文件和行号，直接点击就能跳转到对应的源码位置

另外还要重点排查Angular项目的几个高频场景：

• 模板文件（.html）：有没有直接写的data URI，比如<img src="data:image/svg+xml;utf8,<svg...#fff...>">
• TypeScript组件：有没有动态拼接data URI的逻辑，比如处理图片、字体或者自定义图标时生成的字符串
• 第三方依赖：某些图表库、UI组件或者富文本编辑器可能会偷偷生成带#的data URI，需要检查依赖的文档或源码

二、批量修复的方案 #

找到问题后，根据不同场景选择修复方式：

1. 静态data URI直接替换：如果是固定写死的，直接把所有#替换成%23就行
2. 动态生成的URI封装转换函数：写一个工具函数统一处理，避免重复劳动：

   // 可以放在shared/utils.ts之类的工具文件里
   export function escapeDataUriHash(uri: string): string {
     if (uri?.startsWith('data:')) {
       return uri.replace(/#/g, '%23');
     }
     return uri;
   }
   

   然后在所有生成或使用data URI的地方调用这个函数，比如模板里用管道：

   <img [src]="imageData | escapeDataUri">
   

   或者在组件代码里处理：

   this.iconSrc = escapeDataUriHash(generateIconDataUri());
   

3. 构建阶段自动处理：如果是打包过程中生成的资源（比如webpack转译的图片），可以配置对应的插件（比如url-loader），在转成data URI时自动转义#

三、验证修复效果 #

修复后别忘确认问题解决：

• 刷新页面，打开DevTools的Console标签，确认那个deprecation警告消失
• 可以用Network标签查看资源请求，检查data URI里的#是否已经变成%23

内容的提问来源于stack exchange，提问作者BBaysinger