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 for Converge360.

comments powered by Disqus


  • 'Dev Home' Update Leads Developer Goodies in AI-Powered Windows 11 Update

    Along with today's new AI-powered Windows 11 update come new goodies for developers, including a new edition of Dev Home, a preview offering described as a "control center" providing coding-focused features and functionality.

  • Community Dev Gives VS Code Python Some YAPF

    The latest update to Python in Visual Studio Code includes a new extension for Python formatting that was contributed by a member of the open source community.

  • Devs Demand Visual Studio 2022 Ditch Old .NET Framework Dependencies

    Developers commenting on a Microsoft post about performance improvements in the upcoming .NET 8 demanded the company end Visual Studio 2022's dependency on the old .NET Framework.

  • Microsoft Remakes Azure Quantum Dev Kit with Rust, 'and It Runs in the Browser!'

    "The' tl;dr' is that we rewrote it (mostly) in Rust which compiles to WebAssembly for VS Code or the web, and to native binaries for Python."

Subscribe on YouTube