[Android] 이미지 파일(binary string) 받아서 Compose로 띄우기

 

API 문서에서 Response값이 string..

Media type이 image/png 일 때..

어떻게 하시나요..?

 

두부고백하자면,, 그동안 json 응답값만 처리했어서 string만? 띠용? 😮

살짝 감이 안와서 postman까지 돌려봤는데 리얼루 이미지 파일이 온거 보고

눈물의 삽질을 했습니다..

 

---

 

개발 환경은 다음과 같습니다.

• Retrofit2 2.9.0
• okhttp3 4.11.0

원래 (json 응답값)라면,

@POST("transform")
    suspend fun request(
        @Part("type") type: RequestBody,
        @Part img: MultipartBody.Part,
    ): Response<String>

 

Response<String> 값으로 받아서 → apicall 받는 부분에서 json으로 만들어 → ResultData로 넘겨주는 작업을 거치는 코드로 작업했었습니다.

 

 

suspend inline fun <reified T : Any> apiCall(
    call: suspend () -> Response<String>
): ResultData<T> {
suspend inline fun apiCall(
    call: suspend () -> Response<ResponseBody>,
): ResultData<T> {
    return try {
        val json = Json {
            encodeDefaults = true
            prettyPrint = true
            isLenient = true
            ignoreUnknownKeys = true
            coerceInputValues = true
        }

        val response = call.invoke()
        val responseStr = response.body() ?: ""

        if (response.isSuccessful) {
            ResultData.Success(json.decodeFromString<T>(responseStr))
        } else {
            ResultData.Error(errorMessage = response.errorBody()?.toString() ?: " api response error")
        }

(머 이런식으로…)

 

 

그리고 ResultData를 받는 DataSourceImpl 같은 부분에서는 직접 생성한 data class로 매핑했었죠…

( 방법은 여러가지겠지만요 😅 )

 

 

그런데 이게 자꾸 에러가 나는겁니다..?

JSON document was not fully consumed

kotlinx.serialization.json.internal.JsonDecodingException: Expected start of the object ‘{‘, but had ‘EOF’ instead

 

 

그래서 다시 api 문서를 찾아보고.. 담당 개발자분이 올려주신 예시도 다시 읽어보니

'response를 image binary로 드립니다'  였던 것입니다..!!

 

 

 

결론부터 적어보자면

 

먼저 Retrofit 설정시 응답값에 맞는 ConvertFactory 등록을 해야합니다.

받아오는 값이 json이 아닌 문자열이기 때문에

GsonConverterFactory가 아닌 ScalarsConverterFactory를 사용하는게 맞더라구요.

 

@Provides
    @Singleton
    fun provideRetrofit(okHttpClient: OkHttpClient): Retrofit {
        return Retrofit.Builder()
            .baseUrl(BASE_URL)
            .addConverterFactory(ScalarsConverterFactory.create())
            .client(okHttpClient)
            .build()
    }

 

 

 

그리고 ResponseBody로 받아 byteArray로 변환하면 되는 것이었습니다..

@POST("transform")
    suspend fun request(
        @Part("type") type: RequestBody,
        @Part img: MultipartBody.Part,
    ): Response<ResponseBody>

 

 

이렇게 ResponseBody로 받는 이유는 내장함수로 bytes()가 있기 때문인데요,,

저는 bytes() 이용하려고 ResponseBody 로 받은거니까 꼭 이렇게 안해도 될 것 같습니다

suspend inline fun apiCall(
    call: suspend () -> Response<ResponseBody>,
): ResultData<ByteArray?> {
    return try {

        val response = call.invoke()
        if (response.isSuccessful) {
            ResultData.Success(response.body()?.bytes())
        } else {
            ResultData.Error(errorMessage = response.errorBody()?.toString() ?: "response error")
        }

    } catch (e: Exception) {
        Log.e("API CALL","${e.cause} \n${e.message}")
        ResultData.Error(errorMessage = e.message)
    }
}

 

response.body()를 바로 bytes() 로 바꿔 ResultData<ByteArray> 를 반환하고

 

viewModel에서 Bitmap으로 바꾸면

val bitmap = BitmapFactory.decodeByteArray(data.image, 0, data.image?.size?:0)

 

 

jetpack compose 기준!

 Image(
                        bitmap = data.asImageBitmap(),
                        contentDescription = "",
                        modifier = Modifier
                            .fillMaxWidth()
                    )

이렇게 이미지를 띄울 수 있는 것입니다!

 

 

 

 

 

 

이 과정이 조금 힘들었던게

binary string이라 로그 출력도 잘 안되고

안드로이드로 띄울 수 있는 이미지로 변환하는 과정에서 자꾸 null만 반환했기에

제 기준 조금 까다로웠습니다..

응답값으로 id값이라던가.. createdTime이라던가… 전혀 없고 오로지 이미지 파일뿐이라면!

참고가 되었으면 좋겠습니다..

🙇🏻‍♀️