时间戳

首页 > 解决方案 > 在 webview 中适用于 iOS 模拟器，在 iOS 设备上失败

nativescript - 在 webview 中适用于 iOS 模拟器，在 iOS 设备上失败

问题描述

这是一个听起来已经修复的问题，但即使在升级到 {N} 4.2.4 之后，我发现我无法在 iOS 设备上的 web 视图中加载本地图像文件。这是一些示例代码...

主页.xml：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
   <GridLayout>  
      <WebView src="{{ htmlsrc }}" />
    </GridLayout>
</Page>

主视图模型.js

var Observable = require("data/observable").Observable;

function createViewModel() {
  var viewModel = new Observable();

  let style = '<style>div.marker {background-color: gray; margin-right: 24px;} img.marker {margin: 5px 0px 0px 5px;} li {font-size: 18pt; margin-bottom: 8px;} </style>'
  let htmlpre = '<!DOCTYPE html><html><head>' + style + '</head><body>';
  let htmlpost = '</body></html>';

  viewModel.htmlsrc = htmlpre;
  viewModel.htmlsrc += '<p>This is an image: </p>'
  viewModel.htmlsrc += '<div class="marker"><img class="marker" src="./marker_r.png"></div>';
  viewModel.htmlsrc += htmlpost;

  return viewModel;
}

exports.createViewModel = createViewModel;

我已经尝试了 img 标签的 src 属性的各种变体，例如

"marker_r.png"
"./marker_r.png"
"~/marker_r.png"

我也尝试过指定完全限定和编码的路径，但都无济于事。我已经看到问题 4443似乎解决了这个主题，以及stackoverflow.com/questions/44505825/nativescript-ios-webview-local-files，但我仍然想知道如何让它工作。

标签： nativescript

解决方案

WKWebview 之后事情似乎发生了变化，它似乎只在我们特别提到基本路径时才允许读取访问。不幸的是，{N} 实现不允许设置基础浴的选项，但您可以尝试以下解决方法。

将本地图片加载到 WebView

如果您想保持数据绑定正常工作，那么您将不得不覆盖 WebView 的 iOS 原型链并在此处修改此方法。

推荐阅读