使用 Cordova 在 iOS 中显示带有外部源的图像

Posted

技术标签:

【中文标题】使用 Cordova 在 iOS 中显示带有外部源的图像【英文标题】:Display image with external source in iOS with Cordova 【发布时间】:2015-04-24 06:21:47 【问题描述】:

我要做的就是在使用 Ionic/Cordova/Angular 的 ios 模拟器中显示以下图像,并将源设置为外部位置 (AWS S3):

<img src="https://miyagi-photos.s3.amazonaws.com/madeline-profile"/>

我尝试了以下方法:

1) 将 AmazonAWS 添加到 Cordova 的白名单中,但我很高兴它已经被第一行覆盖了:

<access origin="*"/> <!-- existing -->
<access origin="*.amazonaws.*" />  <!-- added this -->

2) 尝试像这样完全删除协议:

<img src="miyagi-photos.s3.amazonaws.com/madeline-profile"/>

3) 尝试使用与标准 http 协议不同的图像:

<img src="http://upload.wikimedia.org/wikipedia/en/b/b1/Portrait_placeholder.png"/>

4) 尝试使用 ng-src 而不是 src:

<img ng-src="https://miyagi-photos.s3.amazonaws.com/madeline-profile"/>

参考全文:

<ion-view class="has-header" view-title="Create Class">
  <ion-content>
    <form>
      <div>
        <label for="ClassName">Class Name: </label>
        <input type="text" name="name" ng-model="classInformation.name" required>
      </div>

      <div>
        <label for="ClassPhoto">Class Photo: </label>
        <div class="button" ng-file-select ng-file-change="upload($files)" ng-multiple="multiple">Select File</div>
        <img src="https://miyagi-photos.s3.amazonaws.com/madeline-profile" />
      </div>

      <div>
        <label for="description">description: </label>
        <input type="text" name="description" ng-model="classInformation.description" required>
      </div>

      <div>
        <label for="rate">rate: </label>
        <input type="text" name="rate" ng-model="classInformation.rate" required>
      </div>

      <div>
        <label for="date">date: </label>
        <input type="text" name="date" ng-click="setDate()" ng-model="classInformation.date" required>
      </div>

      <div>
        <label for="time">time: </label>
        <input type="text" name="time" ng-click="setTime()" ng-model="classInformation.time" required>
      </div>

      <div>
        <label for="location">location: </label>
        <input type="text" name="location" ng-model="classInformation.location" required>
      </div>

      <button type="submit" value="Submit" ng-click="createClass()">Create Class</button>
    </form>
  </ion-content>
</ion-view>

【问题讨论】:

你在使用 ionic live reload 吗? 这是在我运行 ionic build ios 并在 Xcode 中启动模拟器之后。我相信我的设置,离子实时重新加载仅在我调用 ionic serve 进行浏览器测试时运行。我的浏览器没有问题。 "ionic run -l" 也可以在设备上调用。您实际上也可以在您的设备上设置实时重新加载。关于你的问题;你没有你的 ,你需要把图像的完整路径。 你可以试试用“ng-src”代替“src”吗? 是的,我最初使用的是 ng-src,但没有运气。忘记将其添加到我尝试过的事情列表中 - 谢谢。我已经编辑了帖子。 【参考方案1】:

重启Xcode后问题消失。

【讨论】:

以上是关于使用 Cordova 在 iOS 中显示带有外部源的图像的主要内容,如果未能解决你的问题,请参考以下文章

Cordova 5.3.1 和 iOS9 平台 - 我无法从外部源加载图像和脚本

外部 webview 页面上带有 inapp 浏览器的 Cordova 应用程序

带有 Cordova 的 Android 上文件的绝对路径参考

无法使用 cordova iOS 在 iframe 中正确加载外部 URL

位置栏未出现在 InAppBrowser for iOS、Cordova 中

Phonegap / Cordova ios外部链接iframe无法在safari中打开