我正在使用 Jetpack Compose 和 Coil 构建一个 Android 应用程序来显示个人资料图像。我使用 AsyncImage 从 URL 加载图像，但它没有在屏幕上渲染任何内容。
这是我的相关代码：
@Composable
fun ProfilePage(authViewModel: AuthViewModel) {
var tempImageUri by remember { mutableStateOf<Uri?>(null) }
val profileImageUrl by authViewModel.profileImageUrl.collectAsState()
val isUploading by authViewModel.isUploading.collectAsState()
val context = LocalContext.current
LaunchedEffect(Unit) {
authViewModel.loadProfileImageUrl()
}
val galleryLauncher = rememberLauncherForActivityResult(
contract = ActivityResultContracts.GetContent()
) { uri: Uri? ->
uri?.let {
tempImageUri = it
authViewModel.uploadProfileImage(it)
}
}
val cameraLauncher = rememberLauncherForActivityResult(
contract = ActivityResultContracts.TakePicture()
) { success: Boolean ->
if (success) {
tempImageUri?.let { authViewModel.uploadProfileImage(it) }
}
}
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Card(
modifier = Modifier
.size(200.dp)
.padding(8.dp)
) {
if (isUploading) {
androidx.compose.foundation.layout.Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
CircularProgressIndicator()
}
} else {
var lol = "https://randomuser.me/api/portraits/men/32.jpg";
AsyncImage(
model = lol,
contentDescription = "Profile Image",
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop,
onLoading = { /* You can add a loading indicator here if needed */ },
onError = { /* You can add an error placeholder here if needed */ }
)
}
}
Spacer(modifier = Modifier.height(16.dp))
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceEvenly
) {
Button(onClick = { galleryLauncher.launch("image/*") }) {
Text("Choose from Gallery")
}
Button(onClick = {
val photoFile = File.createTempFile(
"profile_photo",
".jpg",
context.cacheDir
).apply {
createNewFile()
deleteOnExit()
}
val photoUri = FileProvider.getUriForFile(
context,
"${context.packageName}.fileprovider",
photoFile
)
tempImageUri = photoUri
cameraLauncher.launch(photoUri)
}) {
Text("Take Photo")
}
}
}
}
我已经在 AndroidManifest.xml 中添加了所需的互联网权限：
但是，图像仍然没有出现。 以下是我尝试过的一些事情：
确认该 URL 可以直接在浏览器中使用。 将 AsyncImage 包装在固定大小的卡中。 它适用于本地图像，但不适用于网址。
尝试在模型参数上添加 ImageRequest
var lol = "https://randomuser.me/api/portraits/men/32.jpg"
AsyncImage(
model =
ImageRequest
.Builder(LocalContext.current)
.data(lol)
.placeholder(R.drawable.generic_icon)
.dispatcher(Dispatchers.IO)
.build(),
contentDescription = "Profile Image",
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop,
)