iOS开发记录

ios 编辑器3-基于wkwebview编辑器插入网络图片不显示

2020-09-02  本文已影响0人  DaZenD

ios 编辑器3-WKWebview插入网络图片不显示问题

这个知识点,没有太多话语权,因为并没有找到根本原因,这个问题查了很多资料,然而并没有查到,所以,下面多留点关键词,希望有这类问题的小伙伴能搜到这种实现方式:

WKWebview加载网络图片失败

ios端html插入网络图片失败

WKWebview网络图片的bug

WKWebview中js注入网络图片失败

问题

组件化的实话,插入一个file,形如下面这种,app端是非常常用的ui组合,如果图片是一个网络图片的话,就不显示,很奇怪

file.png

nnhubbard/ZSSRichTextEditor 这个库,实测js动态注入网络图片也是不显示的

gcdwebserver方案

上篇说过了,加载时候本地服务器模拟server资源加载

dom重新渲染

zss_editor.insertFile = function(url,title, message, thumbnailUrl) {
    zss_editor.restorerange();
    var html = '&nbsp;<div class="file" data-file-url="'+url+'"  onclick="FileClick(this)"><img id="imageSpan" src="'+thumbnailUrl+'" align="left" height="100" width="100" /><h3>'+title+'</h3><p>'+message+'</p></div>&nbsp;<br>';;
    zss_editor.insertHTML(html);
}

zss_editor.replaceImageInFile = function(url, alt) {
    var img = document.createElement('img');
    img.setAttribute('src',url);
    img.setAttribute('alt',alt);
    img.setAttribute('align',"left");
    img.setAttribute('height', 100);
    img.setAttribute('width', 100);
    document.getElementById('imageSpan').replaceWith(img);
}

zss_editor.insertHTML = function(html) {
    document.execCommand('insertHTML', false, html);
}

app端的file类型:

网络图片不加载,并不是加载失败,而是不加载。ios就延迟加载,先插入dom,延迟后再添加或替换img标签,触发dom重新渲染,这样就ok了

ios 编辑器1-基于WKWebview的编辑器技术方案
ios 编辑器2-基于wkwebview编辑器加载本地html资源
ios 编辑器4-基于wkwebview编辑器插入视频文件封面问题

上一篇下一篇

猜你喜欢

热点阅读