问题出现
项目有一个功能为导入微信文章, 查看导入文章是发现图片加载错误, 如下:
解决:
在网上搜索,前端,大致有以下3种解决方式:
1.添加meta标签, 这种方法试了 无效
<meta name="referrer" content="never">
2.添加采集图片链接, 这种方法测试也 无效
3. 使用iframe 解决, 这种试了 有效, 以下是我的代码( vue )
function showImg(url, i) {
var frameid = "frameimg" + Math.random();
window[`img_${i}`] =
'<img id="' +
`mock_wx_article_img_${i}` +
'" style="display:block;max-width:100%;margin:0 auto;" src=\'' +
url +
"?" +
Math.random() +
"' /><script>window.onload = function() { parent.document.getElementById('" +
frameid +
"').height = document.getElementById(\"" +
`mock_wx_article_img_${i}` +
"\").height+'px'; }<" +
"/script>";
let iframeHtml =
'<iframe id="' +
frameid +
'" style="width:100%;" src="javascript:parent.' +
`img_${i}` +
';" frameBorder="0" scrolling="no"></iframe>';
return iframeHtml;
}
const changeToShowWxImg = function(html) {
let mockDiv = document.createElement("div");
mockDiv.setAttribute("id", "mock_wx_article_div");
mockDiv.setAttribute("style", "opacity: 0;");
mockDiv.innerHTML = html;
document.body.appendChild(mockDiv);
let imgList = mockDiv.querySelectorAll("img");
imgList = [...imgList];
try {
imgList.forEach((node, i) => {
let img_src = node.getAttribute("src");
let div = document.createElement("div");
div.innerHTML = showImg(img_src, i);
node.parentNode.appendChild(div);
node.parentNode.removeChild(node);
});
let new_wx_article_content = mockDiv.innerHTML;
document.body.removeChild(mockDiv);
return new_wx_article_content;
} catch (e) {
console.log(e);
return html;
}
};
export default changeToShowWxImg;
将后台返回的content 转化 成新的html, 在通过 v-html 插入 .
PS: 如有其它方法,请不吝赐教, 十分感谢