任何 Web、桌面或移动开发人员都经常使用图像。你可以从 C#、HTML、XAML、CSS、C++、VB、TypeScript 甚至代码注释中引用它们。有些图像是本地的，有些存在于线上或网络共享中，而其他图像可能仅以 base64 编码字符串的形式存在。我们在代码中以多种方式引用它们，但总是作为字符串值，不能显示图像的样子。直到现在。

当光标悬停时，预览图像的功能请求最近得到了很多关注，所以我们决定研究一下。不同的编辑器已经存在各种各样的图像预览器，但它们的工作方式都略有不同。如果我们要构建它，我们必须以一种对 Visual Studio 来说原生和自然的方式来做。因此，我们发起了一个社区实验来解决这个问题。

结果是代码编辑器中的编辑器 tooltip。该 tooltip 以原始大小显示图像，但宽度和高度上限为500像素。在预览图的下面，你会看到像素大小和字节大小。

实验参与者对这一功能非常兴奋。以下是他们中的一些人的留言:

我们确定了一些需要回答的重要问题:

- 必须支持哪些图像文件类型?

- 哪些图像引用语法和格式最常用?

- 哪些附加功能可能很重要?

这个实验帮助我们回答了这些问题。我们来复习一下。

支持的文件类型

实验参与者最常用的图像文件有(按顺序排列):

- PNG – 53%

- JPG – 21%

- SVG – 15%

- ICO – 4%

- WebP – 4%

- GIF – 2%

- 其他文件类型，如 BMP, TIFF, DDS

WPF 唯一不直接支持的格式是 SVG，因此我们必须将其转换为 WPF 可以呈现的位图格式。这就是为什么 SVG 支持没有进入第一个版本，但我们希望能尽快准备好。

引用语法

有多种方法可以引用图像，主要取决于语言和应用程序模型。我们从实验中看到的最常见的是:

- 相对 URL (./, ../, /)

- 文件路径 (c:\, c:/, \, /)

- 数据 URI (data:image/png;base64,…)

- 包 URI (pack://application:,,,/Images/MyImage.png)

- 图像昵称 (KnownMonikers.StatusWarning)

附加功能

除了简单地显示图像预览外，社区还提出了两个功能。

缩放是一个很酷的功能，在未来的更新中可以进一步研究。然而，目前还不在讨论范围之内。

另一个想法是，用户应该能够单击预览图像，使其在默认的图像查看器应用程序中打开。这个功能很简单，所以我们就增加了。

这就是图像悬停预览功能如何进入 Visual Studio 的故事。要自己尝试，请安装最新版本的 Visual Studio 2022 (v17.10或更新版本)并尝试一下。

原文链接：https://devblogs.microsoft.com/visualstudio/making-visual-studio-a-bit-more-visual/