Capacitor+Svelte移动端应用图片无法显示问题求助

核心原因 #

Android 9（API 28）及以上版本默认禁止明文HTTP请求，仅允许HTTPS协议，这就是网页端正常显示、移动端加载失败的根本原因。

解决方案 #

方法1：修改Capacitor配置（快速生效） #

直接在capacitor.config.ts中添加server配置，全局开启明文HTTP支持：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.moviesapp.chrispoulsen',
  appName: 'movies-app',
  webDir: 'build',
  server: {
    cleartext: true // 允许明文HTTP请求
  }
};

export default config;

修改完成后执行npx cap sync android同步配置，再重新编译Android项目即可。

方法2：自定义Android网络安全策略（精细控制） #

如果只想允许特定域名的HTTP请求，或者需要更严格的安全规则，按以下步骤操作：

1. 在android/app/src/main/res/目录下新建xml文件夹，创建network_security_config.xml文件，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <!-- 全局允许明文请求（和方法1效果一致） -->
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>

    <!-- 仅允许指定域名的HTTP请求（替换上面的base-config即可） -->
    <!--
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">你的图片源域名</domain>
    </domain-config>
    -->
</network-security-config>

2. 打开android/app/src/main/AndroidManifest.xml，在<application>标签中添加网络安全配置引用：

<application
    ...
    android:networkSecurityConfig="@xml/network_security_config"
    ...>

3. 确认AndroidManifest.xml中已包含网络权限（Capacitor通常会自动添加，无则手动补充）：

<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

4. 执行npx cap sync android同步配置后重新编译项目。

注意事项 #

生产环境建议优先改用HTTPS地址加载图片，明文HTTP存在安全风险，上述配置仅用于开发或特殊场景临时解决问题。

内容的提问来源于stack exchange，提问作者Christopher Poulsen