Can I add an image to SideBar Webview extension? #2418
-
|
Hi, I am making an extension (my first project!) I wanted to create an application that works in the sidebar and was looking at official sample programs and such, but it happened when I tried to add an image to the sidebar! I tried displaying them in the regular main panel and it worked fine! Is it possible to display the images in the sidebar? This is my import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
const provider = new ImageProvider(context.extensionUri);
context.subscriptions.push(
vscode.window.registerWebviewViewProvider(ImageProvider.viewType, provider));
}
class ImageProvider implements vscode.WebviewViewProvider {
public static readonly viewType = 'test.sideview';
private _view?: vscode.WebviewView;
constructor(
private readonly _extensionUri: vscode.Uri,
) { }
public resolveWebviewView(
panel: vscode.WebviewView,
_context: vscode.WebviewViewResolveContext,
_token: vscode.CancellationToken,
) {
this._view = panel;
panel.webview.options = {
// Allow scripts in the webview
enableScripts: true,
localResourceRoots: [
this._extensionUri
]
};
panel.webview.html = this.getViewContent(panel.webview);
}
private getViewContent(webview: vscode.Webview) {
// Get the local path to main script run in the webview, then convert it to a uri we can use in the webview.
const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.js'));
// Do the same for the stylesheet.
const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'reset.css'));
const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'vscode.css'));
const styleMainUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'main.css'));
const testImageUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, 'media', 'test.png'));
// Use a nonce to only allow a specific script to be run.
const nonce = getNonce();
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${styleResetUri}" rel="stylesheet">
<link href="${styleVSCodeUri}" rel="stylesheet">
<link href="${styleMainUri}" rel="stylesheet">
<title>Cat Colors</title>
</head>
<body>
<div class="image_area">
<img src="${testImageUri}" />
</div>
<button>test</button>
</body>
</html>`;
}
}
function getNonce() {
let text = '';
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 32; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}AND IT'S RESULT! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
CSP was a problem. |
Beta Was this translation helpful? Give feedback.
CSP was a problem.
Here is the code in question.
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">It appears that this code did not allow the image to be displayed, so it could not be displayed.
After modifying the code to the following code, it was successfully displayed!
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}'; img-src ${webview.cspSource}">