visual-studio-code - vscode 扩展 iconPath

Question

我正在开发 VSCode 扩展，它使用 WebView 显示附加数据。除了 webview 图标之外，我工作得很好。

如果未指定任何内容，则图标为:

我正在阅读文档并注意到 WebView 允许使用以下格式的 iconPath 选项:

我尝试使用以下代码添加图标:

const onDiskPath = vscode.Uri.file(
    path.join(context.extensionPath, 'resources', 'my-icon.svg')
);

panel.iconPath = panel.webview.asWebviewUri(onDiskPath);

但是我收到错误:

Refused to load the image 'vscode-resource://file///f:/dev/my-extension/resources/my-icon.svg' because it violates the following Content Security Policy directive: "img-src 'self' https: data: blob: vscode-remote-resource:".

在 webview html 中，可以使用以下内容策略:

<meta http-equiv="Content-Security-Policy" 
        content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';">

(我尝试过修改内容政策，但没有任何改变。显示了相同的错误)

内容政策或图标路径的生成方式是否有问题？ (或者完全不同的东西:))

Answer 1

我认为您误解了“webview URI”的用途 - 它用于在 webview 内使用的资源。对于 iconPath 您需要一个常规文件 URI，因此它应该简单如下:

panel.iconPath = onDiskPath;