ImageSmith
Resimler, kodun onlardan bahsettiği yerde: işaretçiyi bir yolun üzerinde bekletin, bir kart resmi, piksel boyutunu ve dosya boyutunu gösterir. SVG çizilir, bir .ico'nun her boyutu oradadır, animasyonlu GIF'ler oynatılır — ve aynı kart Çözüm Gezgini'ndeki önizlemenin yerini alır.
Ücretsiz · Visual Studio 2022 ve 2026 · 14 arayüz dili · PNG, JPEG, GIF, BMP, TIFF, ICO, WebP, SVG
Neden ImageSmith
Adını değil, resmi görün
/Assets/Icons/save.svg pek bir şey söylemez. ImageSmith, dosyayı açmadan, yolun yazıldığı yerde resmin kendisini gösterir — XAML, Razor, CSS, C#, JSON, proje dosyaları ve .resx içinde.
SVG ve .ico dahil
Visual Studio SVG için hiçbir şey, bir simge için de yalnızca tek boyut gösterir. ImageSmith SVG'yi çizer, bir .ico içindeki her görüntüyü listeler ve animasyonlu GIF'leri oynatır.
Eksik resimler göze çarpar
Projede veya diskte olmayan bir resmin yolu dalgalı alt çizgi alır, Windows'un ihtiyaç duyduğu boyutları olmayan bir uygulama simgesi de bir ipucu alır — bir kullanıcı boş bir resim veya bulanık bir simge görmeden önce.
Ücretsiz, hiçbir koşul olmadan
Abonelik yok, “pro” sürüm yok, veri toplama yok, Çıktı penceresinde ya da başlangıçta mesaj yok. Sizden isteyeceğimiz tek şey — bir süre kullandıktan sonra — Marketplace'te bir değerlendirme. Visual Studio 2022 ve 2026'da, x64 ve ARM64'te çalışır.
Özellikler
- Bir yolun üzerine gelince bir kart: dama tahtası üzerinde resim, piksel boyutu, dosya boyutu ve biçimi, kodun onu ne büyüklükte gösterdiği (%20 ölçekte) ve eylemler — Aç, Varsayılan uygulamada aç, Çözüm Gezgini'nde göster, Yolu kopyala.
- Yerleşik önizleme yerine Çözüm Gezgini'nde aynı kart, Resmi kopyala ile birlikte.
- SVG çizilir, ayrıca 16, 24, 32 ve 48 px'te — bir düğmede nasıl görüneceği.
- Renkleri ve biçimiyle bir .ico'nun her boyutu; Tüm boyutları PNG olarak kaydet, her boyut için PNG olarak kaydet, Seçili boyutu kopyala.
- Animasyonlu GIF'ler kare sayısı ve süresiyle birlikte kartta oynatılır.
- Yan yana ölçek çeşitleri:
_x2,_x1_25,@2x,.scale-200,.targetsize-24,-480. - Yolların önünde, renk örnekleri gibi küçük resimler.
- İpuçları: Resim bulunamadı ve Olağan boyutları olmayan simge.
- PNG, JPEG, GIF, BMP, TIFF, ICO, WebP ve SVG; resmin arkasında dama tahtası, beyaz veya koyu arka plan.
Koddaki kart
İşaretçiyi bir resim yolunun üzerinde bekletin, kart düzenleyicinin Hızlı Bilgi araç ipucunda açılır. Diskteki dosyada ne varsa, projenin onu bulacağı şekilde gösterir: dosyanın klasöründen veya projeden göreli bir yol, projeden (veya wwwroot'tan) kök yol, o derlemenin projesinden bir pack URI'si.
| Bölüm | Ne gösterir |
|---|---|
| Resim | Dama tahtası üzerinde resim (saydamlık görünür), küçük resimler keskin piksellerle büyütülür, büyükler sığdırılır. Köşedeki üç düğme arka planı değiştirir. |
| Boyut etiketi | Piksel boyutu ve aynı etiket Width veya Height ayarladığında kodun onu ne büyüklükte gösterdiği: 1600 × 1000 · %20 ölçekte. Bir SVG için: SVG · sığdırıldı. |
| Bilgiler | Dosya adı, piksel boyutu, dosya boyutu, biçim ve DPI (96 değilse); bir SVG için viewBox, şekil sayısı ve gradyan ya da metin içerip içermediği; çözümdeki yol. |
| Eylemler | Aç (Visual Studio'da), Varsayılan uygulamada aç, Çözüm Gezgini'nde göster, Yolu kopyala. |
Dama tahtası, beyaz veya koyu
Beyaz bir kartta beyaz bir logo kaybolur. Resmin sağ üstündeki üç düğme dama tahtası, beyaz ve koyu arasında geçiş yapar; seçim Visual Studio kapanana kadar geçerlidir. Kartın başlangıçtaki arka planı bir seçenektir.
Yolların önünde küçük resimler
Dosyası mevcut olan her yolun önüne, satır yüksekliğinde minik bir resim gelir — renk örneği gibi. Bir simge dosyası listesi bir bakışta okunabilir. Daha sade bir düzenleyici için kapatın.
Çözüm Gezgini
İşaretçiyi Çözüm Gezgini'nde bir resim dosyasının üzerinde bekletin: yerleşik önizleme yerine yanında ImageSmith kartı açılır. SVG çizilir (yerleşik önizleme hiçbir şey göstermez), bir .ico her boyutu gösterir (yerleşik önizleme tek boyut gösterir) ve resmin ölçek çeşitleri altında sıralanır.
İşaretçi öğenin veya kartın üzerindeyken kart açık kalır, böylece bağlantılarına tıklanabilir — burada Aç, Varsayılan uygulamada aç, Yolu kopyala ve Resmi kopyala. Ayrılınca, kaydırınca, bir tuşa basınca veya ağaçta tıklayınca kapanır.
Klasörler, kod dosyaları ve ImageSmith'in göstermediği her şey yerleşik araç ipucunu korur. Bir Visual Studio güncellemesi Çözüm Gezgini'ni işaretçinin altındaki öğe bulunamayacak şekilde değiştirirse, ImageSmith devreden çıkar.
Simgeler (.ico)
Bir .ico dosyası her boyut için bir tane olmak üzere birkaç resim içerir. Bir .ico'nun kartı hepsini dama tahtası üzerinde yan yana (128 px'ten büyük boyutlar 128'de gösterilir) ve her boyutu, renklerini, BMP mi PNG mi saklandığını ve baytlarını içeren bir tabloyla gösterir.
Seçmek için bir boyuta — şeritte veya tabloda — tıklayın. Seçili boyutu kopyala o görüntüyü panoya koyar.
Bir satırdaki PNG olarak kaydet o boyutu bir PNG dosyasına yazar; Tüm boyutları PNG olarak kaydet… bir klasör sorar ve her boyut için bir PNG yazar (contoso-16.png … contoso-256.png).
SVG
SVG dosyaları SharpVectors ile çizilir — koddaki kartta, Çözüm Gezgini'nde ve küçük resimlerde. Kart, resmin altında onu 16, 24, 32 ve 48 px'te gösterir: bir araç çubuğu düğmesinde nasıl görüneceği.
Bilgiler viewBox (viewBox yoksa genişlik × yükseklik), dosya boyutu ve şekil sayısıdır; dosyada varsa gradyan ve metin de eklenir. Çizilemeyen bir SVG, resim yerine hatanın satırını gösterir.
Bir SVG'nin başvurduğu dış dosyalar ve URL'ler asla yüklenmez.
Animasyonlu GIF
Animasyonlu bir GIF kartta döngü halinde oynatılır, bilgiler kaç karesi olduğunu ve ne kadar sürdüğünü söyler: GIF · animasyonlu, 8 kare, 0,8 sn. Tek kareli bir GIF hareketsiz kalır. WebP, TIFF ve BMP, PNG ve JPEG gibi gösterilir.
Ölçek çeşitleri
Resimler genellikle yüksek DPI ekranlar için birkaç ölçekte gelir. Dosyalar yan yana durduğunda kart onları resmin altında sıralar; her biri ölçeği ve piksel boyutuyla orantılı çizilir (×2 · 64); gösterilenin çevresi çizilir. Eksik olan olağan bir ölçek kesikli bir yuvadır.
| Adlandırma | Örnek | Eksikse kesikli yuva |
|---|---|---|
| Çarpan (WinForms, rapor tasarımcıları) | Chart.png, Chart_x2.png, Chart_x1_25.png, Chart_x1.5.png | ×1, ×2 |
| @2x (web, iOS, React Native) | Chart.png, Chart@2x.png | ×1, ×2 |
| scale- (UWP, WinUI, MSIX) | Logo.scale-100.png, Logo.scale-200.png | 100, 200 |
| targetsize- (UWP, WinUI, MSIX) | Square44x44Logo.targetsize-24.png | 16, 24, 32, 48 |
| Boyut soneki | icon-16.png, icon-32.png, tent-480.jpg, tent-768.jpg | — |
Aynı kartta görmek için bir çeşide tıklayın. Bu satır koddaki kartta ve Çözüm Gezgini'nde bulunur.
Neler tanınır
Bir yol, her dilin dosya adlarını yazdığı yerlerde, bir resim dosyasının uzantısından tanınır:
| Nerede | Örnekler |
|---|---|
| XAML (WPF, WinUI, MAUI, Avalonia) | Source="/Assets/logo.png", pack://application:,,,/Contoso;component/Icons/save.svg, /Contoso.Icons;component/…, ms-appx:///Assets/hero.jpg, avares://Contoso.App/Assets/logo.png |
| Razor, Blazor ve HTML | <img src="~/images/tent.jpg">, srcset, <link rel="icon">, style="background: url(…)" |
| CSS, SCSS, LESS | url("../images/hero.webp"), url(…) without quotes, image-set(…) |
| C# | "Assets/hero.jpg", @"Assets\splash.png", new Uri("pack://…"), Path.Combine("Assets", "logo.svg") |
| JSON | "icon": "images/icon-192.png" (appsettings.json, manifest.json) |
| Proje dosyaları | <ApplicationIcon>, <Resource Include="…">, <Content Include="…">, MAUI and appxmanifest images |
| .resx | Bir resme işaret eden ResXFileRef ve bir resim yolu olan düz bir dize değeri. |
| Biçimler | PNG, JPEG, GIF, BMP, TIFF, ICO, WebP, SVG |
Çözümdeki başka bir projeye işaret eden pack URI'leri (/Contoso.Icons;component/Icons/save.svg, sürümlü veya sürümsüz) o projede aranır. ms-appx:/// UWP ve WinUI'nin nitelikli dosyalarını da bulur (Logo.png için Logo.scale-200.png); bir MAUI logo.png dosyası Resources/Images/logo.svg dosyasını bulur.
Bilerek gösterilmez: URL'ler ve data: URI'leri, bağlamalar ve kaynaklar ({Binding …}, {StaticResource …}), ilişkilendirilmiş dizeler ve değişkenlerden oluşturulan yollar, MSBuild özellikleri, joker karakterler, pack://siteoforigin: ve C#'taki yalın dosya adları ("logo.png" herhangi bir şey olabilir).
İpuçları
SmithWorks ailesiyle ortak iki tür ipucu: her metin ImageSmith: ile başlar, araç ipucunda Bu tür ipucunu gösterme bulunur ve LensSmith varsa ipucu satır sonunda da görünür.
| İpucu | Ne zaman | Metin |
|---|---|---|
| Resim bulunamadı | Projede veya diskte olmayan bir resmin yolu (dalgalı alt çizgi). URL'ler, değişken içeren yollar ve koddaki yalın dosya adları denetlenmez. | ImageSmith: /Assets/banner-old.png is not in the project. |
| Olağan boyutları olmayan simge | 16, 32, 48 veya 256 px içermeyen bir uygulama ya da bildirim alanı .ico dosyası (gri noktalar): Windows başka bir boyutu ölçekler ve simge bulanık görünür. Favicon'lar denetlenmez. | ImageSmith: tray.ico has no 16 × 16 image — Windows will scale a larger one. |
Her tür ayarlarda Düzenleyicideki ipuçları altında veya doğrudan ipucundan kapatılabilir.
Ayarlar
Araçlar › Seçenekler › SmithWorks › ImageSmith. Her seçeneğin ne yaptığına dair kısa bir açıklaması vardır.
| Seçenek | Varsayılan |
|---|---|
| Üzerine gelince önizleme | açık |
| Çözüm Gezgini'nde kart | açık |
| Yolların önünde küçük resimler | açık |
| Önizleme arka planı | Dama tahtası |
| İpuçları: Resim bulunamadı | açık |
| İpuçları: Olağan boyutları olmayan simge | açık |
| Marketplace'te değerlendirme iste | açık |
Ayarlar %LocalAppData%\ImageSmith içinde saklanır. Varsayılanlara sıfırla her şeyi yeniden açar.
SSS
İşaretçiyi bir yolun üzerinde bekletiyorum ve hiçbir şey açılmıyor. Neden?
ImageSmith yalnızca diskte bulduğu bir dosya için kart gösterir. Yolun bir resim uzantısıyla bittiğini ve değişkenlerden, bir bağlamadan veya bir URL'den oluşturulmadığını denetleyin (bunlar asla gösterilmez). Dosya eksikse, yolda bunun yerine Resim bulunamadı dalgalı alt çizgisi olmalıdır. C#'taki yalın dosya adları ("logo.png") bilerek atlanır — orada yalnızca klasör veya pack URI'si içeren yollar okunur.
avares://OtherAssembly/… için neden hiçbir şey yok?
Bir avares:// veya pack URI'si bir derlemeyi adlandırır. O derleme açık çözümün bir projesiyse ImageSmith o projeye bakar. Bir NuGet paketinden veya başvurulan bir DLL'den geliyorsa resim onun içine derlenmiştir ve diskte bir dosya değildir — bu yüzden gösterilecek bir şey yoktur ve ImageSmith onu eksik olarak da bildirmez.
SVG'min ad alanı yanlış veya yok. Çizilir mi?
Evet. xmlns="http://w3.org" ile veya hiç ad alanı olmadan kaydedilmiş dosyalar yaygındır; ImageSmith çizmeden hemen önce SVG ad alanını ekler, böylece kart resmi gösterir. Tarayıcılar yine de böyle bir dosyayı reddedebilir, bu yüzden düzeltmeye değer.
Kart bu SVG'nin çizilemediğini söylüyor. Şimdi ne yapmalı?
Kart hatanın ilk satırını gösterir (örneğin satırı ve sütunuyla bir XML hatası). Dosyayı düzeltin ve işaretçiyi yeniden yolun üzerinde bekletin — değişen bir dosya yeniden okunur.
Çözüm Gezgini'nde yerleşik önizlemeyi koruyabilir miyim?
Evet — ayarlarda Çözüm Gezgini'nde kart seçeneğini kapatın. Koddaki kart kalır.
Büyük bir resim düzenleyiciyi yavaşlatır mı?
Hayır. Resimler arka plan iş parçacığında ve yalnızca kartın ihtiyaç duyduğu boyutta çözülür; küçük resimler küçük çözülür. 256 MB'tan büyük dosyalar (8 MB'tan büyük SVG, 16 MB'tan büyük ICO) bilgilerini resimsiz gösterir.
ImageSmith bir yere bir şey gönderiyor mu?
Hayır. Bilgisayarınızda çözümünüzün resim dosyalarını okur, başka hiçbir şey yapmaz — telemetri yok, istek yok ve bir SVG internetten asla bir şey yüklemez.
Bir sorunu nereye bildiririm veya bir özelliği nereye öneririm?
GitHub'daki Feedback deposunda bir issue açın — hatalar, fikirler ve tanınmayan yollar için formlar var (lütfen özel adları değiştirin). Marketplace'teki Q&A sekmesini de kullanabilirsiniz.
Değişiklik günlüğü
1.1.0
- SmithWorks ailesinin ortak stilinde çizilmiş yeni bir simge.
1.0.0
- İlk sürüm: XAML, Razor ve HTML, CSS, C#, JSON, proje dosyaları ve .resx içindeki resim yollarının üzerine gelince açılan kart; ölçek çeşitleriyle Çözüm Gezgini'ndeki kart; çizilen SVG, bir .ico'nun her boyutu, animasyonlu GIF'ler; yolların önünde küçük resimler; Resim bulunamadı ve Olağan boyutları olmayan simge ipuçları; tek seferlik bir değerlendirme isteği.