{"id":244770,"date":"2023-08-28T07:00:10","date_gmt":"2023-08-28T14:00:10","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=244770"},"modified":"2023-08-25T12:04:06","modified_gmt":"2023-08-25T19:04:06","slug":"working-with-images-just-got-easier-in-visual-studio","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/working-with-images-just-got-easier-in-visual-studio\/","title":{"rendered":"Working with images just got easier in Visual Studio"},"content":{"rendered":"<p>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\u2019t show us what the image looks like. It would be nice if those image references could show us the images too.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/08\/CSS-image-screenshot.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-244771\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/08\/CSS-image-screenshot.png\" alt=\"Image CSS image screenshot\" width=\"766\" height=\"324\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/08\/CSS-image-screenshot.png 766w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/08\/CSS-image-screenshot-300x127.png 300w\" sizes=\"(max-width: 766px) 100vw, 766px\" \/><\/a><\/p>\n<p>The feature request <a href=\"https:\/\/developercommunity.visualstudio.com\/t\/An-option-to-preview-images-when-they-ar\/10419941?ftype=idea&amp;stateGroup=active&amp;page=5\">An option to preview images when they are hovered<\/a> has gotten some attention lately, and we think it sounds like a great idea. If you think so too, remember to <a href=\"https:\/\/developercommunity.visualstudio.com\/t\/An-option-to-preview-images-when-they-ar\/10419941?ftype=idea&amp;stateGroup=active&amp;page=5\">vote for it<\/a>. The question is, what is the best solution?<\/p>\n<p>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\u2019re launching an experiment to figure out what that could look like.<\/p>\n<h2>The experiment<\/h2>\n<p>As with all our other community experiments, we are kicking this off with an extension. We call it <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=MadsKristensen.ImagePreview\">Image Preview<\/a>, because that\u2019s exactly what it does.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/08\/animation.gif\"><img decoding=\"async\" class=\"alignnone size-full wp-image-244772\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2023\/08\/animation.gif\" alt=\"Image animation\" width=\"1121\" height=\"440\" \/><\/a><\/p>\n<p>When the mouse hovers over an image reference in the code editor, a tooltip appears showing the rendered image.<\/p>\n<p>It supports <strong>GIF<\/strong>, <strong>PNG<\/strong>, <strong>JPG<\/strong>, <strong>ICO<\/strong>, and <strong>SVG<\/strong> in the following image reference syntaxes:<\/p>\n<ul>\n<li><strong>Absolute URL<\/strong>\u00a0(http, https, and ftp)<\/li>\n<li><strong>Relative URL<\/strong>\u00a0(.\/, ..\/, and \/)<\/li>\n<li><strong>File path<\/strong>\u00a0(c:\\, c:\/, \\, and \/)<\/li>\n<li><strong>Data URI<\/strong>\u00a0(data:image\/png;base64,&#8230;)<\/li>\n<li><strong>Pack URI<\/strong>\u00a0(pack:\/\/application:,,,\/Images\/MyImage.png)<\/li>\n<\/ul>\n<p>When referencing a rooted relative path such as <em>\/file.png<\/em>, the extension will try to resolve it relative to either the project root folder or the <em>wwwroot<\/em> folder in case of ASP.NET core projects.<\/p>\n<p>Does this have all the features needed? Are we missing any common syntaxes?<\/p>\n<p>Give <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=MadsKristensen.ImagePreview\">Image Preview<\/a> a try and let us know what you think. Feel free to open issues on the GitHub issue tracker or send pull requests.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":642,"featured_media":244771,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1196,155,1029],"tags":[6862,634],"class_list":["post-244770","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desktop","category-visual-studio","category-web","tag-experiment","tag-preview"],"acf":[],"blog_post_summary":"<p>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 [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/244770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/642"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=244770"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/244770\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/244771"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=244770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=244770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=244770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}