Working with images just got easier in Visual Studio
Any web, desktop, or mobile developer works with images often. You reference them from C#, HTML, XAML, CSS, C++, TypeScript, and even in code comments. Some images are local, and some exist online or on network shares, while others only exist as base64 encoded strings. We refer to them in numerous ways in code, but always as string values that don’t show us what the image looks like. It would be nice if those image references could show us the images too.
The feature request An option to preview images when they are hovered has gotten some attention lately, and we think it sounds like a great idea. If you think so too, remember to vote for it. The question is, what is the best solution?
Various image previewers exist for different editors already, but they all do things a little differently. If we were to build this, we must do it in a way that feels native and natural to Visual Studio. To do that, we’re launching an experiment to figure out what that could look like.
As with all our other community experiments, we are kicking this off with an extension. We call it Image Preview, because that’s exactly what it does.
When the mouse hovers over an image reference in the code editor, a tooltip appears showing the rendered image.
It supports GIF, PNG, JPG, ICO, and SVG in the following image reference syntaxes:
- Absolute URL (http, https, and ftp)
- Relative URL (./, ../, and /)
- File path (c:\, c:/, \, and /)
- Data URI (data:image/png;base64,…)
- Pack URI (pack://application:,,,/Images/MyImage.png)
When referencing a rooted relative path such as /file.png, the extension will try to resolve it relative to either the project root folder or the wwwroot folder in case of ASP.NET core projects.
Does this have all the features needed? Are we missing any common syntaxes?
Give Image Preview a try and let us know what you think. Feel free to open issues on the GitHub issue tracker or send pull requests.