将 base64 编码的图标添加到 SPFx ListView 命令集扩展

Question

我正在尝试向我使用 Waldek 的教程创建的 ListView 命令集扩展添加一个图标 Configure extension icon。

我遇到的问题是：收到 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

这看起来是 Microsoft 端的一个已知问题。

建议您等待几天解决。如果它是一个阻塞问题，建议您使用图像（带有文件 url）并且所有用户都可以访问的图像。

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

Answer 2

埃里克，

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

我发了一篇关于它的博客（https://tahoeninjas.blog/2019/08/31/fixing-base64-svg-icons-in-spfx/），但解决方案是不使用base64编码，只使用html编码数据中的 SVG url.

希望对您有所帮助？

将 base64 编码的图标添加到 SPFx ListView 命令集扩展

Adding base64 encoded icons to a SPFx ListView CommandSet Extension

base64

spfx