如何在 Kotlin Compose 网页中加载图像？

【问题标题】：How to load image in Kotlin Compose web?如何在 Kotlin Compose 网页中加载图像？
【发布时间】：2022-01-31 03:46:50
【问题描述】：

使用 Kotlin compose for web 时如何从硬盘加载图像？是否有针对 js、ios 和 android 的 kotlin 多平台库？一个只处理 Web 部件的库会很棒！如果没有，那么我可以考虑使用 javascript 并直接从 javascript 而不是 kotlin 中的 ktor 将图像发布到服务器的其他解决方案。

【问题讨论】：

标签： web-component kotlin-multiplatform kotlin-js

【解决方案1】：

这是对我有用的解决方案。显示上传文件的图像预览。

        Input(
        type = InputType.File,
        attrs =  {
            id("fileInput")
            accept("image/*")
            onChange {
                val img = document.getElementById("img") as HTMLImageElement
                val fileInput = document.getElementById("fileInput") as HTMLInputElement
                val fileReader = FileReader()
                fileReader.readAsDataURL(fileInput.files?.get(0) as Blob)
                fileReader.onload = {
                    val imageFile = (it.target as FileReader).result
                    img.src = imageFile as String
                    Unit
                }
            }
        }
    )

【讨论】：