{"id":2679,"date":"2025-11-07T11:55:54","date_gmt":"2025-11-07T02:55:54","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=2679"},"modified":"2025-11-07T12:06:26","modified_gmt":"2025-11-07T03:06:26","slug":"swift-insert-imagesate-management","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/11\/07\/swift-insert-imagesate-management\/","title":{"rendered":"[Swift]\uc774\ubbf8\uc9c0\ub123\uae30,\uc0c1\ud0dc\uad00\ub9ac \/ Insert image,Sate management"},"content":{"rendered":"\n<p>\ud83d\udc49\ud83c\udffb \uc0c1\ud0dc\uad00\ub9ac\ub97c \ud1b5\ud574\uc11c \ubcc4 \ubaa8\uc591\uc744 \ub204\ub974\uba74 \uc544\uc774\ucf58 \ubaa8\uc591\uc774 \ubc14\ub01d\ub2c8\ub2e4.<br>When you click on the star shape through status management, the icon shape changes.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \ub85c\uceec \uc774\ubbf8\uc9c0\uc640 \ub124\ud2b8\uc6cc\ud06c \uc774\ubbf8\uc9c0\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<br>Use local and network images.<\/p>\n\n\n\n<p>1.\uc774\ubbf8\uc9c0 \ub123\uae30 \/ Insert  image<\/p>\n\n\n\n<p>\u2714\ufe0fAssets \ub514\ub809\ud1a0\ub9ac\uc5d0 \uc774\ubbf8\uc9c0\ub97c \ub04c\uc5b4\ub2e4 \ub193\uc73c\uba74\ub429\ub2c8\ub2e4.<br>Just drag and drop the image into the Assets directory.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"439\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/swift-InsertImage-1024x439.png\" alt=\"\" class=\"wp-image-2683\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/swift-InsertImage-1024x439.png 1024w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/swift-InsertImage-300x129.png 300w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/swift-InsertImage-768x329.png 768w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/swift-InsertImage-1536x659.png 1536w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/swift-InsertImage-2048x878.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>2.\uc18c\uc2a4\ucf54\ub4dc \/ Source Code<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ ContentView\n\nimport SwiftUI\n\n\/\/ \ub124\ud2b8\uc6cc\ud06c \uc774\ubbf8\uc9c0 URL \/ Network image URL\nlet dummyImageUrl = URL(string: \"https:\/\/picsum.photos\/300\/300\")!\n\nstruct ContentView: View {\n    var body: some View {\n        NavigationView {\n            VStack(spacing: 16) {\n                Text(\"\uc774\ubbf8\uc9c0 \ub85c\ub4dc \ubc0f \uc0c1\ud0dc \ubcc0\uacbd \uc544\uc774\ucf58 \uc608\uc81c\")\n                    .font(.headline)\n                    .frame(maxWidth: .infinity, alignment: .center)\n\n                Text(\"Image loading and state change icon example\")\n                    .font(.subheadline)\n                    .foregroundColor(.gray)\n                    .frame(maxWidth: .infinity, alignment: .center)\n\n                HStack(spacing: 16) {\n                    \/\/ \ub124\ud2b8\uc6cc\ud06c \uc774\ubbf8\uc9c0 \/ Network image\n                    ImageWithToggleIcon(\n                        imageContent: {\n                            AsyncImage(url: dummyImageUrl) { phase in\n                                switch phase {\n                                case .empty:\n                                    ProgressView()\n                                        .frame(maxWidth: .infinity, maxHeight: .infinity)\n                                case .success(let image):\n                                    image\n                                        .resizable()\n                                        .scaledToFill()\n                                case .failure:\n                                    Color.gray\n                                        .overlay(Text(\"Error\").foregroundColor(.white))\n                                @unknown default:\n                                    EmptyView()\n                                }\n                            }\n                        }\n                    )\n\n                    \/\/ \ub85c\uceec \uc774\ubbf8\uc9c0 \/ Local image\n                    ImageWithToggleIcon(\n                        imageContent: {\n                            Image(\"dog\")\n                                .resizable()\n                                .scaledToFill()\n                        }\n                    )\n                }\n                .frame(maxWidth: .infinity)\n                Spacer()\n            }\n            .padding()\n            .navigationTitle(\"ImageState Example\")\n        }\n    }\n}\n\n\/\/ \uac1c\ubcc4 \uc774\ubbf8\uc9c0 + \uc990\uaca8\ucc3e\uae30 \ud1a0\uae00 \uc544\uc774\ucf58\n\/\/ Individual images + favorite toggle icon\nstruct ImageWithToggleIcon&lt;Content: View&gt;: View {\n    @State private var isFavorite = false\n    let imageContent: () -&gt; Content\n\n    var body: some View {\n        ZStack(alignment: .bottomTrailing) {\n            imageContent()\n                .frame(width: 150, height: 150)\n                .clipped()\n                .cornerRadius(10)\n                .overlay(\n                    RoundedRectangle(cornerRadius: 10)\n                        .stroke(Color.gray.opacity(0.3), lineWidth: 1)\n                )\n\n            \/\/ \ud074\ub9ad \uc2dc \ud1a0\uae00\ub418\ub294 \uc544\uc774\ucf58 \/ Icon that toggles when clicked\n            Image(systemName: isFavorite ? \"star.fill\" : \"star\")\n                .resizable()\n                .frame(width: 28, height: 28)\n                .foregroundColor(isFavorite ? .yellow : .white)\n                .shadow(radius: 2)\n                .padding(8)\n                .onTapGesture {\n                    withAnimation(.spring()) {\n                        isFavorite.toggle()\n                    }\n                }\n        }\n        .frame(width: 150, height: 150)\n    }\n}\n\n#Preview {\n    ContentView()\n}\n<\/code><\/pre>\n\n\n\n<p>3.\uc2a4\ud06c\ub9b0\uc0f7 \/ ScreenShot<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"488\" height=\"1024\" src=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/swift-ScreenShot-488x1024.png\" alt=\"\" class=\"wp-image-2682\" srcset=\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/swift-ScreenShot-488x1024.png 488w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/swift-ScreenShot-143x300.png 143w, https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2025\/11\/swift-ScreenShot.png 512w\" sizes=\"auto, (max-width: 488px) 100vw, 488px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc49\ud83c\udffb \uc0c1\ud0dc\uad00\ub9ac\ub97c \ud1b5\ud574\uc11c \ubcc4 \ubaa8\uc591\uc744 \ub204\ub974\uba74 \uc544\uc774\ucf58 \ubaa8\uc591\uc774 \ubc14\ub01d\ub2c8\ub2e4.When you click on the star shape through status management, the icon shape changes. \ud83d\udc49\ud83c\udffb \ub85c\uceec \uc774\ubbf8\uc9c0\uc640 \ub124\ud2b8\uc6cc\ud06c \uc774\ubbf8\uc9c0\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.Use local and network images. 1.\uc774\ubbf8\uc9c0 \ub123\uae30 \/ Insert image \u2714\ufe0fAssets \ub514\ub809\ud1a0\ub9ac\uc5d0 \uc774\ubbf8\uc9c0\ub97c \ub04c\uc5b4\ub2e4 \ub193\uc73c\uba74\ub429\ub2c8\ub2e4.Just drag and drop the image into the Assets directory. 2.\uc18c\uc2a4\ucf54\ub4dc \/ Source Code [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,1],"tags":[],"class_list":["post-2679","post","type-post","status-publish","format-standard","hentry","category-swift","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=2679"}],"version-history":[{"count":4,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2679\/revisions"}],"predecessor-version":[{"id":2686,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/2679\/revisions\/2686"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=2679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=2679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=2679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}