Question

我试图在我使用Waldek教程Configure extension icon创建的ListView CommandSet扩展中添加一个图标。

我遇到的问题是：获取gulp警告*appears to be a relative web URL. This means that when the is rendered, this URL will be relative to the CDN url for the rest of the package assets. If a relative filesystem path was intended, prepend the path with "./".*而不在命令集中显示图标。

它试图打开https://localhost:4321/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0 ...

我正在使用React框架处理最新的SPFx 1.4.0版。

这是扩展清单。

"items": {
"COMMAND_1": {
  "title": {
    "default": "<command title>"
  },
  "iconImageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGLDJGlHAAAACBjSFJNAACHCwAAjA8AAP1SAACBQgAAfXUAAOmPAAA85gAAGc0Hn9XQAAAg1GlDQ1BJQ0MgUHJvZmlsZQAAaN6VkWVUlklFTkSuQmCC..<removed chunk>",
  "type": "command"
}

}

请提供一些建议或指示来解决这个问题。

Answer 1

这看起来是微软的一个已知问题。

建议你等几天才能解决。如果它是阻塞问题，则建议您使用图像（带文件URL）以及所有用户都可以访问的图像。

Github问题 - Web part Base 64 icons do not render anymore

Answer 2

Erik，

我也遇到了同样的问题，所以我研究了它，找到了一种将SVG与自定义图标一起使用的方法。

我发布了一个有关它的博客（https://tahoeninjas.blog/2019/08/31/fixing-base64-svg-icons-in-spfx/），但是解决方案是不使用base64编码，而仅在数据URL中使用html编码的SVG。

我希望这对您有帮助吗？

将base64编码图标添加到SPFx ListView CommandSet扩展

2 个答案: