Visual Studio Code - How can I view images with unconventional filename extensions with VS Code's Image Preview feature?

SeanStrain
August 22, 2023
277 views
0 votes
2 Answers

I am having trouble viewing files with .png encoding without the .png file extension in Visual Studio Code. It will only show the warning "The file is not displayed because it is either binary or uses an unsupported text encoding.". Trying to select an editor only provides the options "text" or "hex".

So, is it possible to change the file association of a given file extension to inform VS Code to render that file as a .png, or other image type?

I have tried adding the lines "files.associations": { "*.otherfiletype": "png" } to my settings.json, but this has no effect.

Tags: visual-studio-code

Answers

- starball
- August 22, 2023 at 11:02 am
- 0 votes
0
You can use the workbench.editorAssociations setting. Ex. in settings.json:
```
"workbench.editorAssociations": {
    "*.jpg2": "imagePreview.previewEditor",
},
```
It will still give a warning that

The file is not displayed in the text editor because it is either binary or uses an unsupported text encoding.

But the change will allow you to click the "Open Anyway" button and be presented with the option to open it with the "Image Preview" (builtin) custom editor.
Login or Signup to reply.

- LevinBaria
- August 22, 2023 at 11:13 am
- 0 votes
0
Visual Studio Code (VS Code) is primarily designed as a text editor and does not inherently support viewing image files like .png files directly within the editor. The "files.associations" configuration in VS Code settings is meant for associating file extensions with specific programming languages, not for rendering images.

However, you can achieve your goal using a VS Code extension called "Image Preview" which allows you to preview image files within the editor.

Find the "Image Preview" extension by Kamesh Kotwani and click the "Install" button.

Login or Signup to reply.