前端解决微信公众号图片引用错误

问题出现

项目有一个功能为导入微信文章, 查看导入文章是发现图片加载错误, 如下:

解决:

在网上搜索,前端,大致有以下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: 如有其它方法,请不吝赐教, 十分感谢