Ionic/Angular 看不到真实的图像 phone

Question

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

上看不到它

 <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

但是当我从 phone 打开它时，它显示如下：https://prnt.sc/12jddef 我该如何修复它？感谢您的帮助！

Answer 1

欢迎使用 Whosebug。您的大括号 {{...}} 位于 src 字符串的中间。它们没有字符串插值功能。为了在 angular 模板中组合两个字符串，您可以尝试这样做：

 <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

发件人：

首先，在此处创建网络安全配置文件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>

Ionic/Angular 看不到真实的图像 phone

Ionic/Angular cant see images in real phone

multidimensional-array

angularjs

ionic-framework

angular

ionic4