News
Visual Studio Tool Lets Devs See Images, Not Just Text Strings
Microsoft's Mads Kristensen has a point: Developers working with images in Visual Studio must deal only with text strings that don't show the actual images.
"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," he said in an Aug. 28 post. "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."
To that end, the extension guru has whipped up another offering to add to his long list: Image Preview.
Once again, Kristensen's innovation comes in response to developer feedback provided on Microsoft's Developer Community site, where a July 20 post asked for "An option to preview images when they are hovered."
And, even though one commenter said, "This feature could be helpful, but to be real I don't think Microsoft would ever consider it," that's exactly what the tool does, working with GIF, PNG, JPG, ICO and SVG image formats.
Finally, as depicted below, a developer can actually see what that "icon2.png" looks like, not to mention Mads himself.
[Click on image for larger, animated GIF view.] Image Preview in Animated Action (source: Microsoft).
While the idea has been kicked around and realized in various implementations, Kristensen noted they work in different ways. While many image preview tools are available for Visual Studio Code, not so much for the IDE.
"If we were to build this, we must do it in a way that feels native and natural to Visual Studio," he said. "To do that, we're launching an experiment to figure out what that could look like."
The tool tip enacted by hovering over an image works for the following types of string representations, or 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)
Kristensen's creations have a way of eventually appearing as built-in bits in the IDE, and developers can weigh in on this one by opening issues on the GitHub issue tracker or sending pull requests to the GitHub project. The latter seems to be a preference: "Pull requests are also very welcome, since I can't always get around to fixing all bugs myself. This is a personal passion project, so my time is limited." Images seem to be a specialty of Kristensen, as a few of his other of his tools in the marketplace include Image Optimizer, Image Sprites and Image Manifest Tools.
As of this writing, the Image Preview tool in the Visual Studio Marketplace has been installed 61 times, earning a perfect 5.0 rating from two developers who reviewed it.
As noted above, early feedback has been registered on the Developer Community post, where one developer suggested on Aug. 9 that the functionality be available as an extension, since not that many developers were likely to need it.
About the Author
David Ramel is an editor and writer at Converge 360.