Jetpack Compose中如何正确设置rememberAsyncImagePainter的图片尺寸？

从URL加载带有尺寸信息的图片（例如120x40），使用Coil的rememberAsyncImagePainter时，直接传入服务器返回的宽高数值会导致图片显示极小。尝试将数值转为dp时触发编译错误，目标是按服务器返回的精确尺寸正常显示图片。

初始实现代码 #

@Composable
private fun RowScope.PanelLogo(logo: Logo?) {
    val imageUrl = logo?.url
    val imageWidth = logo?.width!!
    val imageHeight = logo.height!!
    val painter = rememberAsyncImagePainter(
        model = ImageRequest.Builder(LocalContext.current)
            .data(imageUrl)
            .decoderFactory(SvgDecoder.Factory())
            .size(Size(imageWidth, imageHeight))
            .build()
    )
    val isImageValid = !imageUrl.isNullOrEmpty() && painter.state is AsyncImagePainter.State.Success
    AnimatedVisibility(visible = isImageValid) {
        Image(
            painter = painter,
            contentDescription = "logo",
            contentScale = ContentScale.FillWidth
        )
    }
}

尝试修改后的错误 #

将宽高转为dp：

val imageWidth = logo?.width?.dp
val imageHeight = logo?.height?.dp

编译错误提示：Type mismatch: inferred type is Dp? but Int was expected

更新后的代码（仍存在错误） #

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.RowScope
import androidx.compose.runtime.Composable
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImagePainter
import coil.compose.rememberAsyncImagePainter
import coil.decode.SvgDecoder
import coil.request.ImageRequest
import coil.size.Size

@Composable
private fun RowScope.PanelClientLogo(logo: Logo?) {
    val imageUrl = logo?.url
    val imageWidth = logo?.width?.dp
    val imageHeight = logo?.height?.dp
    val painter = rememberAsyncImagePainter(
        model = ImageRequest.Builder(LocalContext.current)
            .data(imageUrl)
            .decoderFactory(SvgDecoder.Factory())
            .size(Size(imageWidth, imageHeight))
            .build()
    )
    val isImageValid = !imageUrl.isNullOrEmpty() && painter.state is AsyncImagePainter.State.Success
    AnimatedVisibility(visible = isImageValid) {
        Image(
            painter = painter,
            contentDescription = "photo",
            contentScale = ContentScale.FillWidth
        )
    }
}

data class Logo(val url: String? = null, val width: Int? = null, val height: Int? = null)

核心问题有两个：

1. Coil的Size构造器仅接受像素值（Int类型），无法直接传入Dp对象。
2. Coil的.size()是设置图片解码的像素尺寸，而非UI显示尺寸，显示尺寸需要通过Compose的Modifier.size()约束。

根据服务器返回尺寸的单位，分两种情况处理：

情况1：服务器返回的是dp单位的尺寸 #

需要将dp值转换为设备对应的像素值传给Coil，同时给Image设置dp宽高：

@Composable
private fun RowScope.PanelClientLogo(logo: Logo?) {
    val imageUrl = logo?.url ?: return
    val context = LocalContext.current
    
    // 将dp转为像素值，用于Coil解码
    val widthPx = logo.width?.let { 
        TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP, 
            it.toFloat(), 
            context.resources.displayMetrics
        ).toInt() 
    } ?: 0
    val heightPx = logo.height?.let { 
        TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP, 
            it.toFloat(), 
            context.resources.displayMetrics
        ).toInt() 
    } ?: 0

    val painter = rememberAsyncImagePainter(
        model = ImageRequest.Builder(context)
            .data(imageUrl)
            .decoderFactory(SvgDecoder.Factory())
            .size(Size(widthPx, heightPx))
            .build()
    )

    val isImageValid = painter.state is AsyncImagePainter.State.Success
    AnimatedVisibility(visible = isImageValid) {
        Image(
            painter = painter,
            contentDescription = "logo",
            // 设置UI显示的dp宽高
            modifier = Modifier.size(
                width = (logo.width ?: 0).dp, 
                height = (logo.height ?: 0).dp
            ),
            contentScale = ContentScale.Fit
        )
    }
}

情况2：服务器返回的是像素单位的尺寸 #

将像素值转为Dp给Image设置显示约束，Coil直接使用原像素值：

@Composable
private fun RowScope.PanelClientLogo(logo: Logo?) {
    val imageUrl = logo?.url ?: return
    val widthPx = logo.width ?: 0
    val heightPx = logo.height ?: 0
    
    // 将像素转为Dp，用于UI显示约束
    val widthDp = with(LocalDensity.current) { widthPx.toDp() }
    val heightDp = with(LocalDensity.current) { heightPx.toDp() }

    val painter = rememberAsyncImagePainter(
        model = ImageRequest.Builder(LocalContext.current)
            .data(imageUrl)
            .decoderFactory(SvgDecoder.Factory())
            .size(Size(widthPx, heightPx))
            .build()
    )

    val isImageValid = painter.state is AsyncImagePainter.State.Success
    AnimatedVisibility(visible = isImageValid) {
        Image(
            painter = painter,
            contentDescription = "logo",
            modifier = Modifier.size(widthDp, heightDp),
            contentScale = ContentScale.Fit
        )
    }
}

额外优化点 #

• 移除原代码中的强制非空!!，改用安全调用+默认值，避免空指针异常。
• 将ContentScale.FillWidth改为ContentScale.Fit，保证图片完整显示，不会被拉伸裁剪。
• 提前判空imageUrl，减少后续空值判断逻辑。

内容的提问来源于stack exchange，提问作者Compose Learner