Display image files (png, jpeg)

[wfortin]

I am trying to enable displaying image files in the editor, I see that the demo supports it but I'm unable to figure out which service override or configuration that I'm missing. Could you point out what minimal configuration we need to do this?

My project

The https://monaco-vscode-api.netlify.app/ demo

Thanks!

[CGNonofr]

That's not about displaying binary files then, that's about displaying images. It's handled by one of the default extension: media-preview

[wfortin]

Ok great, I updated the title of my question. I added

import '@codingame/monaco-vscode-media-preview-default-extension';

And now I get this error

Found unexpected service worker controller. 

Found: node_modules/.pnpm/@[email protected]/node_modules/@codingame/monaco-vscode-view-common-service-override/service-override/vs/workbench/contrib/webview/browser/pre/service-worker.js?v=4&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&id=758a5c6b-563c-47f6-b676-d96915ef363f&remoteAuthority=. 

Expected: node_modules/.pnpm/@[email protected]/node_modules/@codingame/monaco-vscode-view-common-service-override/service-override/vs/workbench/contrib/webview/browser/pre/service-worker.js?v=4&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&id=9af674a1-a564-4de5-b204-25f672188791&remoteAuthority=. Waiting for controllerchange.

[CGNonofr]

The log probably has nothing to do with your problem, anything else?

Are you registering the worker extension host?

[wfortin]

I'm using the enableExtHostWorker parameter in monaco-editor-wrapper.

These are the only logs in my console

log.js:165  INFO Init of EditorApp was completed.
log.js:165  INFO No EditorService configured. monaco-editor will not be started.
webviewElement.js:343 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.
mountTo @ webviewElement.js:343
index.html?id=381150f3-2f5a-4d46-bdb9-b52f6d6a60ab&parentId=1&origin=58b56bba-36b4-4873-acd6-25d962…:1 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.
index.html?id=381150f3-2f5a-4d46-bdb9-b52f6d6a60ab&parentId=1&origin=58b56bba-36b4-4873-acd6-25d962928018&swVersion=4&extensionId=vscode.media-preview&platform=browser&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=http%3A%2F%2Flocalhost%3A3982&serviceWorkerUri=http%3A%2F%2Flocalhost%3A3982%2F%40fs%2FUsers%2Fwfortin%2FProjects%2Fmy_project%2Fnode_modules%2F.pnpm%2F%40codingame%2Bmonaco-vscode-view-common-service-override%4020.2.1%2Fnode_modules%2F%40codingame%2Fmonaco-vscode-view-common-service-override%2Fservice-override%2Fvs%2Fworkbench%2Fcontrib%2Fwebview%2Fbrowser%2Fpre%2Fservice-worker.js&fakeHtmlUri=http%3A%2F%2Flocalhost%3A3982%2F%40fs%2FUsers%2Fwfortin%2FProjects%2Fmy_project%2Fnode_modules%2F.pnpm%2F%40codingame%2Bmonaco-vscode-view-common-service-override%4020.2.1%2Fnode_modules%2F%40codingame%2Fmonaco-vscode-view-common-service-override%2Fservice-override%2Fvs%2Fworkbench%2Fcontrib%2Fwebview%2Fbrowser%2Fpre%2Ffake.html:282 Found unexpected service worker controller. Found: http://localhost:3982/@fs/Users/wfortin/Projects/dbt/bakery/node_modules/.pnpm/@[email protected]/node_modules/@codingame/monaco-vscode-view-common-service-override/service-override/vs/workbench/contrib/webview/browser/pre/service-worker.js?v=4&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&id=04d7e85b-8e07-4bea-adff-cc44b1cdabb6&remoteAuthority=. Expected: http://localhost:3982/@fs/Users/wfortin/Projects/dbt/bakery/node_modules/.pnpm/@[email protected]/node_modules/@codingame/monaco-vscode-view-common-service-override/service-override/vs/workbench/contrib/webview/browser/pre/service-worker.js?v=4&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&id=381150f3-2f5a-4d46-bdb9-b52f6d6a60ab&remoteAuthority=. Waiting for controllerchange.

When I open a text file I also see this

installHook.js:1 Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/microsoft/monaco-editor#faq
overrideMethod @ installHook.js:1
logOnceWebWorkerWarning @ webWorker.js:18
_getOrCreateWorker @ editorWorkerService.js:334
_getProxy @ editorWorkerService.js:342
workerWithSyncedResources @ editorWorkerService.js:370
_workerWithResources @ editorWorkerService.js:181
await in _workerWithResources
computeDefaultDocumentColors @ editorWorkerService.js:176
provideDocumentColors @ defaultDocumentColorProvider.js:13
compute @ color.js:18
_findColorData @ color.js:76
getColors @ color.js:10
(anonymous) @ colorDetector.js:118
createCancelablePromise @ async.js:16
beginCompute @ colorDetector.js:112
updateColors @ colorDetector.js:109
_a70 @ colorDetector.js:63
_createInstance @ instantiationService.js:122
createInstance @ instantiationService.js:96
_instantiateById @ codeEditorContributions.js:101
get @ codeEditorContributions.js:58
getContribution @ codeEditorWidget.js:780
get @ colorDetector.js:84
getLimitReporter @ limitIndicator.contribution.js:50
onActiveEditorChanged @ limitIndicator.contribution.js:77
(anonymous) @ limitIndicator.contribution.js:31
onActiveEditorChanged @ limitIndicator.contribution.js:31
_deliver @ event.js:688
_deliverQueue @ event.js:697
fire @ event.js:714
doHandleActiveEditorChangeEvent @ editorService.js:124
handleActiveEditorChange @ editorService.js:119
(anonymous) @ editorService.js:132
_deliver @ event.js:688
_deliverQueue @ event.js:697
fire @ event.js:714
(anonymous) @ editorGroupView.js:854
await in (anonymous)
doShowEditor @ editorGroupView.js:863
doOpenEditor @ editorGroupView.js:836
openEditor @ editorGroupView.js:777
openEditor @ editorService.js:427
await in openEditor
openEditor @ editor.js:215
openEditor @ editor.js:174
(anonymous) @ explorerView.js:388
_deliver @ event.js:688
fire @ event.js:709
_open @ listService.js:514
onPointer @ listService.js:493
(anonymous) @ listService.js:457
_deliver @ event.js:688
fire @ event.js:709
(anonymous) @ event.js:44
_deliver @ event.js:688
fire @ event.js:709
(anonymous) @ event.js:44
_deliver @ event.js:688
fire @ event.js:709
onViewPointer @ listWidget.js:601
onViewPointer @ abstractTree.js:1771
(anonymous) @ event.js:61
_deliver @ event.js:688
fire @ event.js:709
(anonymous) @ event.js:44
_deliver @ event.js:688
fire @ event.js:709
fn @ event.js:9Understand this warning
installHook.js:1 Unimplemented worker TextEditorWorker (workerMain.js)

This would hint that the worker isn't installing correctly?

[CGNonofr]

The error is about the textEditor worker which is something else

I see nothing obvious, please provide a reproduction repo