add local image to webview

[mohitsuman]

Fix #1754

When you open Add OpenShift Cluster , the webview should show Red Hat OpenShift logo at the top and the cards placed below it.

[codecov]

Codecov Report

Merging #1756 into master will increase coverage by 0.00%.
The diff coverage is 25.00%.

@@           Coverage Diff           @@
##           master    #1756   +/-   ##
=======================================
  Coverage   78.71%   78.72%           
=======================================
  Files          40       40           
  Lines        2626     2627    +1     
  Branches      456      456           
=======================================
+ Hits         2067     2068    +1     
  Misses        559      559           

Impacted Files	Coverage Δ
src/view/cluster/clusterViewLoader.ts	8.42% <0.00%> (ø)
src/extension.ts	81.66% <100.00%> (+0.31%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ac9d5c1...5af8eff. Read the comment docs.

[lstocchi]

@mohitsuman i'm quite newbie with react so not sure if this is the correct way but what i did is...
add a window.icon = "%IMG%" to the index.html -> to pass the right path of the icon (i read it needs the full path) from the clusterViewLoader.ts i used

return `${htmlString}`
            .replace('%COMMAND%', '')
            .replace('%PLATFORM%', process.platform)
            .replace('clusterViewer.js',`${reactAppUri}`)
            .replace('<!-- meta http-equiv="Content-Security-Policy" -->', meta)
            .replace('%IMG%', panel.webview.asWebviewUri(vscode.Uri.file(path.join(reactAppRootOnDisk, '/images/logo.png'))).toString());

then, inside cluster.tsx

declare global {
  interface Window {
      icon: any;
  }
}
const imageSrc = window.icon;

and finally the img-src value inside the Content-Security-Policy

const meta = `<meta http-equiv="Content-Security-Policy"
        content="connect-src *;
            default-src 'none';
            img-src https: vscode-resource:;
            script-src 'unsafe-eval' 'unsafe-inline' vscode-resource:;
            style-src 'self' vscode-resource: 'unsafe-inline';">`;

[mohitsuman]

return `${htmlString}`
            .replace('%COMMAND%', '')
            .replace('%PLATFORM%', process.platform)
            .replace('clusterViewer.js',`${reactAppUri}`)
            .replace('<!-- meta http-equiv="Content-Security-Policy" -->', meta)
            .replace('%IMG%', panel.webview.asWebviewUri(vscode.Uri.file(path.join(reactAppRootOnDisk, '/images/logo.png'))).toString());

@lstocchi What if we have multiple images to use and load. It should ideally just take the root path of the images.

[lstocchi]

@lstocchi What if we have multiple images to use and load. It should ideally just take the root path of the images.

I agree but I really have no idea if it's possible. As i said i never used webview/react before, maybe someone else can be more helpful, sorry :/

[mohitsuman]

@lstocchi What if we have multiple images to use and load. It should ideally just take the root path of the images.

I agree but I really have no idea if it's possible. As i said i never used webview/react before, maybe someone else can be more helpful, sorry :/

It's something vscode webview api should streamline. But thanks for your help, really appreciate. If nothing works, we can have this temp fix.

[evidolob]

@mohitsuman In case if you need to load multiple resources(images) the easiest way will be to embed that resources as data url(base64), you can try https://webpack.js.org/loaders/url-loader/ or https://www.npmjs.com/package/base64-inline-loader

[evidolob]

@mohitsuman With https://www.npmjs.com/package/base64-inline-loader I got load images, I can provide PR or send you a patch

[mohitsuman]

@evidolob can you please send the patch. Does it take care the scenario when we need to provide multiple local files to the webview ?

[evidolob]

Yes, it can handle all images

[evidolob]

diff --git a/package.json b/package.json
index 23cbc13..6a10649 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
   },
   "dependencies": {
     "@kubernetes/client-node": "^0.11.1",
+    "base64-inline-loader": "^1.1.1",
     "binary-search": "^1.3.6",
     "byline": "^5.0.0",
     "fs-extra": "^8.1.0",
diff --git a/src/view/cluster/clusterViewLoader.ts b/src/view/cluster/clusterViewLoader.ts
index 366844a..9869a55 100644
--- a/src/view/cluster/clusterViewLoader.ts
+++ b/src/view/cluster/clusterViewLoader.ts
@@ -136,7 +136,7 @@ export default class ClusterViewLoader {
         const meta = `<meta http-equiv="Content-Security-Policy"
         content="connect-src *;
             default-src 'none';
-            img-src ${panel.webview.cspSource} https:;
+            img-src ${panel.webview.cspSource} https: 'self' data:;
             script-src 'unsafe-eval' 'unsafe-inline' vscode-resource:;
             style-src 'self' vscode-resource: 'unsafe-inline';">`;
         return `${htmlString}`
@@ -145,4 +145,4 @@ export default class ClusterViewLoader {
             .replace('clusterViewer.js',`${reactAppUri}`)
             .replace('<!-- meta http-equiv="Content-Security-Policy" -->', meta);
     }
-}
\ No newline at end of file
+}
diff --git a/src/view/cluster/webpack.config.js b/src/view/cluster/webpack.config.js
index 97b54f9..e9d53dd 100644
--- a/src/view/cluster/webpack.config.js
+++ b/src/view/cluster/webpack.config.js
@@ -40,16 +40,8 @@ module.exports = {
         ]
       },
       {
-        test: /\.(svg|png|jpg|gif)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: 'images/[name].[ext]',
-              esModule: false
-            },
-          },
-        ],
+        test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+        use: 'base64-inline-loader?limit=1000&name=[name].[ext]'
       }
     ]
   },
@@ -62,4 +54,4 @@ module.exports = {
        filename: 'index.html'
     })
  ]
-};
\ No newline at end of file
+};