Show web content in WebviewPanel

Hi all, I’m trying to add a WebviewPanel through a plugin and show simple web content from in the panel. Here is the sample code:

 * Generated using theia-plugin-generator

import * as theia from '@theia/plugin';
import { request } from 'http';

export function start(context: theia.PluginContext) {
    console.log("Plugin-Start Begin");
    const informationMessageTestCommand = {
        id: 'hello-world-example-generated',
        label: "Hello World"

    context.subscriptions.push(theia.commands.registerCommand(informationMessageTestCommand, (...args: any[]) => {
        const req = request(
                host: '',
                path: '',
                method: 'GET',
            response => {
                const chunks: Uint8Array[] = [];
                response.on('data', (chunk: Uint8Array) => {
                response.on('end', () => {
                    const result = Buffer.concat(chunks).toString();

                    var showOptions = new xShowOptions();
                    showOptions.area = theia.WebviewPanelTargetArea.Main;
                    showOptions.preserveFocus = false;
                    showOptions.viewColumn = 0;

                    var panel = theia.window.createWebviewPanel(
                        'View 1',

                    panel.webview.html = result;

    console.log("Plugin-Start End");

Partial content (text) is shown but the images are not shown. Here are few errors:
GET http://localhost:3000/images/nav_logo229.png 404 (Not Found)
GET http://localhost:3000/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png 404 (Not Found)

It seems like the webviewpanel is trying to fetch images from local machine instead of from web ? Please help.

[original thread by rs]

[Dominique Rochefort]

We achieved something similar by putting an iframe as Webview HTML. The Webview HTML is not exactly a hosted webpage, it’s just HTML that is being rendered. For the images to load, you need the origin of the webview to match the origin of images.


Thank you very much, @dominique-rochefort . Could you please share a sample code ?

[Dominique Rochefort]

webview.html = '<html><body><iframe src=""></iframe></body></html>';

[Dominique Rochefort]

You may need to add some styling so that the iframe content expands to fit the whole webview panel.


Thank you very much, @dominique-rochefort