vscode 扩展图标路径答案

【问题标题】：vscode extension iconPathvscode 扩展图标路径
【发布时间】：2020-02-10 10:10:12
【问题描述】：

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

如果没有指定，图标是：

我在阅读文档时注意到WebView 允许iconPath 选项具有以下格式：

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

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

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

但我收到一个错误：

拒绝加载图像“vscode-resource://file///f:/dev/my-extension/resources/my-icon.svg”，因为它违反了以下内容安全策略指令：“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}';">

（我尝试弄乱内容政策，但没有任何改变。显示相同的错误）

内容策略或图标路径生成方式有问题吗？（或完全不同的东西:)）

【问题讨论】：

标签： visual-studio-code vscode-extensions

【解决方案1】：

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

panel.iconPath = onDiskPath;

【讨论】：

【解决方案2】：

我想在 Gama11 的回应之上提供一些示例。

panel.iconPath 采用 vscode.Uri。例如，如果您在扩展程序的根目录中有一个 /resources 目录并带有一个名为 icon.svg 的图标，您可以将其设置为 webview 的图标，如下所示：

panel.iconPath = vscode.Uri.joinPath(context.extensionUri, "resources", "icon.svg");

您还可以提供深色和浅色版本的图标。这是另一个在 /resources 目录中有 2 个图标的示例：

panel.iconPath = {
  dark: vscode.Uri.joinPath(context.extensionUri, "resources", "icon-dark.svg"),
  light: vscode.Uri.joinPath(context.extensionUri, "resources", "icon-light.svg"),
};

【讨论】：