Created
July 15, 2025 07:04
-
-
Save senseilearning/814f3c1df856d612c6ca0e4e3dfe93e7 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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