Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save senseilearning/814f3c1df856d612c6ca0e4e3dfe93e7 to your computer and use it in GitHub Desktop.
Save senseilearning/814f3c1df856d612c6ca0e4e3dfe93e7 to your computer and use it in GitHub Desktop.
Coil3のAsyncImageで画像が表示されない場合、いくつかの基本的な点から確認していくのがおすすめです。URLがブラウザで開けるとのことなので、URL自体は正しい可能性が高いですね。
以下の点を見直してみてください。
1. インターネット接続の権限
まず、アプリがインターネットに接続する権限を持っているか確認します。AndroidManifest.xmlファイルに以下の記述があるか確認してください。
<uses-permission android:name="android.permission.INTERNET" />
2. AsyncImageの基本的な使い方とレイアウト
AsyncImageがUI上で表示されるためのサイズを持っているか確認してください。Modifierでサイズが指定されていないと、画像の読み込みが成功しても表示されません。
import coil3.compose.AsyncImage
AsyncImage(
model = "YOUR_IMAGE_URL",
contentDescription = "Translated description of what the image contains.",
// Modifierでサイズを指定する
modifier = Modifier.size(128.dp) // ← このようなサイズ指定がありますか?
)
Modifier.fillMaxSize()やModifier.size()などで、AsyncImageに表示領域を与えているか確認しましょう。
3. 読み込み状態をデバッグする
placeholderとerrorを設定すると、問題の切り分けに役立ちます。
* placeholderが表示される → 読み込みが開始されている
* errorが表示される → 読み込み中に何らかのエラーが発生した
* どちらも表示されない → AsyncImage自体がコンポーズされていないか、サイズが0の可能性がある
<!-- end list -->
import coil3.compose.AsyncImage
AsyncImage(
model = "YOUR_IMAGE_URL",
contentDescription = "...",
// 読み込み中に表示する画像
placeholder = painterResource(R.drawable.placeholder_image),
// エラー時に表示する画像
error = painterResource(R.drawable.error_image),
modifier = Modifier.size(128.dp)
)
さらに、onStateコールバックを使って、読み込みの状態をログで確認するのが最も確実です。
import coil3.compose.AsyncImage
import android.util.Log
AsyncImage(
model = "YOUR_IMAGE_URL",
contentDescription = "...",
onState = { state ->
// 読み込み状態をLogcatに出力して確認する
Log.d("AsyncImage", "State: $state")
},
modifier = Modifier.size(128.dp)
)
onState のログで State.Error が出力された場合、その result.throwable から具体的なエラー内容を確認できます。
4. HTTP通信の許可 (URLがhttpの場合)
Android 9 (API 28) 以降、セキュリティ上の理由からデフォルトで暗号化されていないHTTP通信がブロックされます。もし画像のURLが http:// で始まっている場合、これが原因の可能性があります。
その場合は、res/xml/network_security_config.xmlファイルを作成し、
<network-security-config>
<base-config cleartextTrafficPermitted="true" />
</network-security-config>
AndroidManifest.xmlの<application>タグに以下のように追記してください。
<application
...
android:networkSecurityConfig="@xml/network_security_config">
...
</application>
5. 依存関係の確認
build.gradle.kts(またはbuild.gradle)ファイルに、Coil3のCompose用ライブラリが正しく追加されているか確認してください。
// build.gradle.kts
dependencies {
// ...
implementation("io.coil-kt:coil3-compose:3.0.0-alpha06") // バージョンは適宜変更
}
まずはこれらの基本的な点を確認してみてください。多くの場合、1〜3のいずれかで原因が見つかるはずです。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment