http.md

Http network image

Translations: 简体中文

Components

Sketch provides the sketch-http-* series of modules to support Http network images, the supported platforms and differences are as follows:

Module	FetcherProvider	Fetcher	Android	iOS	Desktop	Js	WasmJs
sketch-http	jvm: HurlHttpUriFetcherProvider nonJvm: [KtorHttpUriFetcherProvider]	jvm: HurlHttpUriFetcher nonJvm: KtorHttpUriFetcher	✅	✅	✅	✅	✅
sketch-http-hurl	HurlHttpUriFetcherProvider	HurlHttpUriFetcher	✅	❌	✅	❌	❌
sketch-http-okhttp	OkHttpHttpUriFetcherProvider	OkHttpHttpUriFetcher	✅	❌	✅	❌	❌
sketch-http-ktor2	KtorHttpUriFetcherProvider	KtorHttpUriFetcher	✅	✅	✅	✅	❌
sketch-http-ktor3	KtorHttpUriFetcherProvider	KtorHttpUriFetcher	✅	✅	✅	✅	✅

Important

• HurlHttpUriFetcher is implemented using jvm’s own HttpURLConnection and does not require additional dependencies.
• Both the sketch-http-ktor2 and sketch-http-ktor3 modules contain the engines required for each platform. If you need to use other engines, please use their core versions, such as sketch-http-ktor2-core and sketch-http-ktor3-core, and then configure the dependencies of the engine you need
• ktor2 does not support the wasmJs platform. If you must support the wasmJs platform, please use ktor3
• The above components all support automatic registration. You only need to import them without additional configuration. If you need to register manually, please read the documentation: 《Register component》

Install component

Before loading network images, you need to select one of the above components and configure dependencies. Take sketch-http as an example:

${LAST_VERSION}: (Not included 'v')

implementation("io.github.panpf.sketch4:sketch-http:${LAST_VERSION}")

Load network images

Simply use http uri to load images, as follows:

val imageUri = "https://www.sample.com/image.jpg"

// compose
AsyncImage(
    uri = imageUri,
    contentDescription = "photo"
)

// view
imageView.loadImage(imageUri)

Configuration

Sketch abstracts the http part into HttpStack, and each *HttpUriFetcher has a corresponding HttpStack implementation, as follows:

• HurlHttpUriFetcher：HurlStack
• OkHttpHttpUriFetcher：OkHttpStack
• KtorHttpUriFetcher：[KtorStack]

You can disable automatic registration of related components first, and then modify the configuration of HttpStack when manually configuring *HttpUriFetcher, as follows:

HurlStack:

Sketch.Builder(context).apply {
    addIgnoreFetcherProvider(HurlHttpUriFetcherProvider::class)
    addComponents {
        val httpStack = HurlStack.Builder().apply {
            connectTimeout(5000)
            readTimeout(5000)
            userAgent("Android 8.1")
            headers("accept-encoding" to "gzip")   // non-repeatable header
            addHeaders("cookie" to "...")    // repeatable header
            addInterceptor(object : HurlStack.Interceptor {
                override fun intercept(chain: Interceptor.Chain): Response {
                    val connection: HttpURLConnection = chain.connection
                    // ...
                    return chain.proceed()
                }
            })
        }.build()
        addFetcher(HurlHttpUriFetcher.Factory(httpStack))
    }
}.build()

OkHttpStack:

Sketch.Builder(context).apply {
    addIgnoreFetcherProvider(OkHttpHttpUriFetcherProvider::class)
    addComponents {
        val httpStack = OkHttpStack.Builder().apply {
            connectTimeout(5000)
            readTimeout(5000)
            userAgent("Android 8.1")
            headers("accept-encoding" to "gzip")   // non-repeatable header
            addHeaders("cookie" to "...")    // repeatable header
            interceptors(object : okhttp3.Interceptor {
                override fun intercept(chain: Interceptor.Chain): Response {
                    val request = chain.request()
                    // ...
                    return chain.proceed(request)
                }
            })
            networkInterceptors(object : okhttp3.Interceptor {
                override fun intercept(chain: Interceptor.Chain): Response {
                    val request = chain.request()
                    // ...
                    return chain.proceed(request)
                }
            })
        }.build()
        addFetcher(OkHttpHttpUriFetcher.Factory(httpStack))
    }
}.build()

KtorStack:

Sketch.Builder(context).apply {
    addIgnoreFetcherProvider(KtorHttpUriFetcherProvider::class)
    addComponents {
        val httpClient = HttpClient {
            // ...
        }
        val httpStack = KtorStack(httpClient)
        addFetcher(KtorHttpUriFetcher.Factory(httpStack))
    }
}.build()