镜像

WebStorm 提供多种查看图像的方式。您可以使用定位到源代码或在外部图像编辑器中打开图像。

支持的图像格式},{

WebStorm 开箱即用地支持所有常见的图像格式，例如 PNG、SVG、JPG 和 GIF。

查找支持的图像文件类型的完整列表

按设置打开 Ctrl+Alt+S ，然后转到编辑器｜文件类型。
在识别的文件类型列表中，找到图像项。文件名模式区域显示了可以从 WebStorm 打开的图像文件已识别扩展名的完整且版本准确的集合。

从文件类型关联了解更多关于 WebStorm 支持的文件类型的信息。

查看图片

在 WebStorm 中查看图像

在项目工具窗口中，找到并选择图像文件。
或者，将文本光标置于编辑器中引用图像的地方，然后按 Ctrl+B。
要在弹出窗口中预览图像而不是在单独的选项卡中，请选择其引用并按 Ctrl+Shift+I。

在外部编辑器中查看图像

在项目工具窗口中，右键点击图像文件，然后选择跳转到外部编辑器。
或者按 Ctrl+Alt+F4。
WebStorm 会在您的操作系统默认使用的编辑器中打开该图像。您可以在 IDE 中配置另一个图像编辑器以打开文件。

更改默认外部编辑器

在编辑器中右键点击图像，然后从上下文菜单中选择编辑外部编辑器的路径…。
您也可以按 Ctrl+Shift+A 并输入 Edit Path to External Editor。
在外部编辑器路径对话框中，指定您想要打开图像的应用程序的路径，然后点击保存。

导入图片

图片属于 resource files。它们应存储在一个专用文件夹——Resource Root。如果您的项目中没有这个文件夹，创建一个新目录，在项目工具窗口中右键点击它，然后选择将目录标记为 | 资源根目录。

示例

在文件管理器中复制文件，然后粘贴到 WebStorm 项目工具窗口中资源文件所在的文件夹。
在打开的对话框中，如果需要，请编辑文件名和目标位置。点击确定。
右键点击项目工具窗口中粘贴的图像，然后选择复制路径/引用…。然后从弹出列表中选择文件名。
将文本光标置于对图像的引用中，然后按 Ctrl+V 粘贴已保存的图像名称。或者，开始输入图像的名称并使用代码补全。
运行您的应用程序或其中的一部分，以确保图像已正确插入。

2026年 7月 14日