【SwiftUI】フォルダ内の画像を表示する方法

「Swiftで画像を表示」と検索すると...

Assets.xcassets（画像を格納するフォルダ）に画像を格納し、Image()で表示させる方法が出てきます。
しかし今回は、Assets外、プロジェクト直下に格納した画像を表示する方法を解説します。

struct ContentView: View {
    var body: some View {
        Image("sample")    // 画像（sample）を表示
    }
}

Assets.xcassets外に格納した画像を表示させる方法

プロジェクト直下に画像（sample.png)が配置されています。
これをView内で表示させるための手順を示します。

1. フォルダ内の画像をUIImageに変換する

これにはextensionを用います。

extension Image {
    init(path: String) {
        self.init(uiImage: UIImage(named: path)!)
    }
}

2. View内に画像を表示させる

1のextensionに画像のパスを入力することにより、画像が表示されます。
プロジェクト直下のパスは、Bundle.main.pathにより取得されます。forResourceには画像名、ofTypeには拡張子が入ります。

Image(path: Bundle.main.path(forResource: "sample", ofType: "png")!)

コード全体

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing:0){
            Text("Image")
                .frame(width: bodyView.size.width, alignment: .center)
                .font(.largeTitle)
                .fontWeight(.black)
                .padding(.bottom)
            Image(path: Bundle.main.path(forResource: "sample", ofType: "png")!)
        }
    }
}

extension Image {
    init(path: String) {
        self.init(uiImage: UIImage(named: path)!)
    }
}

追記

デフォルトのImageを用いるもっと簡便な方法が見つかったので追記します。
後半にbundle: .mainと記載するだけです。

Image("sample", bundle: .main)

これを用いれば、extensionを使う必要もありません。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing:0){
            Text("Image")
                .frame(width: bodyView.size.width, alignment: .center)
                .font(.largeTitle)
                .fontWeight(.black)
                .padding(.bottom)
            Image("sample", bundle: .main)
                .resizable()
                .frame(width: 300.0, height: 300.0, alignment: .leading)
        }
    }
}

参考サイト

1. https://capibara1969.com/1861/
2. https://stackoverflow.com/questions/63470030/how-to-use-bundle-in-swiftui-with-image
3. https://qiita.com/renchild8/items/14c0aa08b0bc7f4744c9