Webview中的<img/>在iOS模拟器上运行,在iOS设备上失败

时间:2018-10-09 03:15:34

标签: nativescript

听起来这是一个已解决的问题,但是即使升级到{N} 4.2.4,我仍然无法在iOS设备上的网络视图中加载本地图像文件。这是一些示例代码...

main-page.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>

main-view-model.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"

我也尝试过指定完全限定和编码的路径,但无济于事。我见过issue 4443stackoverflow.com/questions/44505825/nativescript-ios-webview-local-files似乎都解决了这个话题,但是我仍然想知道如何使它起作用。

1 个答案:

答案 0 :(得分:0)

WKWebview之后情况似乎有所变化,似乎只有当我们特别提到基本路径时,才允许读取访问。不幸的是,{N}实现不允许设置基池的选项,但是您可以尝试以下解决方法。

Load local images into WebView

如果您想保持数据绑定正常工作,则必须覆盖WebView的iOS原型链并修改此方法here