How to load custom images? about vscode-webview-ui-toolkit HOT 2 OPEN

I think I figured out a workaround:

first, just use the image like any other normal react project, put the image in webview-ui/src/user.png:

App.css

.user-avatar {
    background-image: url(./user.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

After that, the image should be able to display when run npm run start directly inside the webview-ui project. However, it won't work in extension.

Then, override the css in extension html,

const userImage = getUri(webview, this.context.extensionUri, [
            "webview-ui",
            "build",
            "assets",
            "user.png",
        ]);
    <style nonce="${nonce}">
              .user-avatar {
                background-image: url("${userImage}");
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
          </style>

This would make sure that the image could be correctly displayed in extension.

from vscode-webview-ui-toolkit.

Accroding to GPT, another way it to get the image uri via message. However, this is unnecessary complex, and need to maintain a state to store the uri.

from vscode-webview-ui-toolkit.