Ionic/Angular 无法在真实手机中看到图像

Question

我有一个关于电影电视剧列表的项目。但是在真机上看不到照片。我可以在模拟器或离子实验室中看到它，但在我的真实手机上看不到它。

 <img style="margin-left: 5%; border-radius: 15px;"  src="http://image.tmdb.org/t/p/w500{{item.poster_path}}" height="250px" width="250px"  >

这是我关于 img 的代码。当我像这样使用它时，我可以在模拟器上看到：https://prnt.sc/12jdedl

但是当我从手机打开它时，它会显示：https://prnt.sc/12jddef 我该如何解决？感谢您的帮助！

Answer 1

欢迎来到 Stackoverflow。您的大括号 {{...}} 位于 src 字符串的中间。他们没有字符串插值功能。为了在角度模板中组合两个字符串，您可以尝试以下操作：

 <img style="margin-left: 5%; border-radius: 15px;"  [src]="'http://image.tmdb.org/t/p/w500' + item.poster_path" height="250px" width="250px"  >

Answer 2

错误是：ERR_CLEARTEXT_NOT_PERMITTED

发件人：https://stackoverflow.com/a/67127207/1772933

首先，在这里创建网络安全配置文件 YOUR_IONIC_APP_ROOT\android\app\main\res\xml\network_security_config.xml。

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
   <domain-config cleartextTrafficPermitted="true">
        <domain>www.example.com</domain>
   </domain-config>
</network-security-config>

然后编辑 YOUR_IONIC_APP_ROOT\android\app\main\AndroidManifest.xml 将 android:networkSecurityConfig="@xml/network_security_config" 添加到应用程序。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="io.ionic.starter">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        
        android:networkSecurityConfig="@xml/network_security_config"

        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <!-- ... -->
    </application>
    <!-- ... -->
</manifest>