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

问题出现

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

解决:

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

前端解决微信公众号图片引用错误相关推荐

前端实现微信公众号图片上传预览jssdk
最近做了公众号的项目,需要用jssdk,研究了一段时间也走了一些弯路,现在做一些记录 1.首先引入 <script src = "http://res.wx.qq.com/open/j ...
前端对接微信公众号网页开发流程，前期配置
微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传.图片预览.获取位 ...
微信公众号自动回复服务器数据,[终极方案]解决微信公众号服务器配置启用后无法自动回...
在配置服务器配置时Token验证通过后,遇到给公众号发信息,提示:提示该公众号提供的服务出现故障,请稍后再试的问题,一直实现不了自动回复的功能.百度了大量的资料,参考了开发文档,尝试了n种办法,检查 ...
前端对接微信公众号网页开发流程，JSSDK使用
前面两篇文章讲解了前端对接微信公众号网页开发流程,前期配置和前端对接微信公众号网页开发流程,授权对接,本篇文章讲解关于微信JSSDK的使用,官方文档地址一.通过 config 接口注入权限验证配 ...
Appium 解决微信公众号、小程序切换 webview 后无法定位元素的问题
Appium 解决微信公众号.小程序切换 webview 后无法定位元素的问题参考文章: (1)Appium 解决微信公众号.小程序切换 webview 后无法定位元素的问题 (2)https:// ...
利用NATAPP隧道解决微信公众号开发之本地调试难题
文章目录公众号的分类微信公众平台: 编辑模式开发模式开发模式配置流程 1.登录测试号页面,可以看到该测试号相关的信息 2.配置参数介绍 3.搭建本地应用(java/python/php等语言均 ...
前端对接微信公众号网页开发流程，授权对接
前面讲到前端对接微信公众号网页开发流程,前期配置,本篇文章主要详细介绍关于公众号的授权对接. 一.引入微信js-sdk 在需要调用 JS 接口的页面引入如下 JS 文件 http://res.wx. ...
微信公众号图片素材一键删除小工具
微信公众号图片素材上限100000,看似很多,但随着每天发文累计的图片素材会越来越多,一不小心就到达上限,便无法继续发文,这个时候就要承受老板的狂风怒火. 微信公众号后台带有素材图片批量删除功能,操作 ...
nodejs+express解决微信公众号token验证失败
nodejs+express解决微信公众号token验证失败问题描述下面是服务端代码问题原因解决方案重新运行服务器问题解决结语问题描述这里是测试号的状态,如果是公众号的话上边应该显示t ...

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

问题出现

解决:

前端解决微信公众号图片引用错误相关推荐

最新文章

热门文章