使用PixiLoader加载data URI格式SVG图像的跨浏览器兼容问题咨询

PixiJS 内置的 PIXI.Loader 默认对所有传入的资源路径统一走远程资源加载逻辑，没有针对 base64 格式的 Data URI 做特殊适配：

• Chrome 对 XHR 请求 Data URI 的兼容度较高，仅会生成无意义的请求日志不影响功能
• Firefox 对 image/svg+xml 格式的 Data URI 走 XHR 加载的逻辑存在兼容性缺陷，会直接卡住不触发任何完成/错误回调

方案1：跳过Loader直接创建纹理（推荐，符合瞬时同步需求） #

如果不需要统一走Loader的资源管理流程，直接用PIXI.Texture.from接口加载Data URI即可，全程无任何HTTP请求，同步完成加载：

// 直接从svg data URI创建纹理，可立即使用
const markerTexture = PIXI.Texture.from(marker.customIcon);
const markerSprite = new PIXI.Sprite(markerTexture);

方案2：保留Loader流程，指定资源加载参数 #

如果需要统一用Loader管理批量资源，只需要在添加资源时明确指定加载类型和资源类型，即可让Loader跳过XHR请求逻辑，直接解析Data URI生成纹理：

PIXILoader.add({
  name: `marker_xyz`,
  url: marker.customIcon,
  // 强制指定加载类型为图像，不走XHR逻辑
  loadType: PIXI.LoaderResource.LOAD_TYPE.IMAGE,
  // 明确资源类型为图像，避免格式识别异常
  type: PIXI.LoaderResource.TYPE.IMAGE
});
PIXILoader.load((loader, resources) => {
  debugPixi(`Done loading ${Object.keys(resources).length} markers textures`);
});

两种方案都不需要编写自定义加载策略，改造成本极低，可完全解决跨浏览器兼容问题，且不会产生多余的HTTP请求。

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