关于跨域使用富文本图片的问题

Posted 心之所向,砥砺前行。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于跨域使用富文本图片的问题相关的知识,希望对你有一定的参考价值。

刚做了一个小改动,需要在微信端显示另外一个网站中通过富文本编辑后的信息,当然其中包括一些图片内容。

其他的显示都没有问题,唯独照片无法正常显示,一直都是破碎的图片样式。

经过调试发现,图片的显示地址一直为另外一个网站的hosturl+path,然后发现数据库中富文本的内容只有path,也没有注明hosturl,所以图片被自动加上了本地网站的host地址。

所以需要将获取到本地的json内容中图片的路径地址加上另外网站的hosturl即可。

具体实现方式为:

                    var json = JSON.parse(content.data);
                    var d = json["Content"];

                    //匹配图片(g表示匹配所有结果i表示区分大小写)
                    var imgReg = /<img.*?(?:>|\/>)/gi;
                    //匹配src属性
                    var srcReg = /src=[\‘\"]?([^\‘\"]*)[\‘\"]?/i;
                    var arr = d.match(imgReg);
                    if (arr != null)
                    {
                        for (var i = 0; i < arr.length; i++) {
                            var src = arr[i].match(srcReg);
                            //获取图片地址
                            if (src[1]) {

                                var resultImg = mnghost + src[1];
                                 
                                //将json内容中的路径添加上另外服务器的地址即可
                                d = d.replace(src[1], resultImg);


                            }

                        }


                    }    

  

以上是关于关于跨域使用富文本图片的问题的主要内容,如果未能解决你的问题,请参考以下文章

一个关于winform(C#)的富文本框的问题,希望大家能帮帮我,下面我仔细描述下我的需求

轻量级富文本编辑器quill editor结合iview的使用

关于富文本上传图片多选的处理

关于富文本kindeditor中上传本地图片成功后获取到的图片路径是相对路径修改为绝对路径

关于iOS富文本使用

KindEditor - 富文本编辑器 - 使用+上传图片