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

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

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

经过调试发现,图片的显示地址一直为另外一个网站的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);

                            }

                        }

                    }

  

时间: 2024-10-02 11:56:21

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

Django中使用富文本编辑器Uedit

Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. settings.py INSTALLED_APPS = [ ... 'DjangoUeditor', ... ] 2. 配置urls from django.conf.urls import url, include urlpatterns = [ # 富文本相关url url(r'^uedit

Django使用富文本编辑器

1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如:example,php,asp等4.在需要使用富文本编辑器的model中定义meta类: class Media: js = ( '/static/js/kindeditor-4.1.10/kindeditor-min.js', '/static/js/kindeditor-4.1.10/lang

silverlight中使用富文本编辑器

因为项目的需要在silverlight项目中使用富文本编辑器,好用的在线富文本编辑器有很多Fckeditor,百度的ueditor,但是这些富文本编辑器都是html的,想在silverlight中使用必须承载html页面再使用这些富文本编辑器. 之前找到了一个在silverliht中承载html页面的第三方控件htmlhost,但是这个控件有一个不好的地方时,用了只有silverlight项目中所有服务端控件都不能输入中文. 最近找到了一个大牛自己写的一个控件,能够满足我们的需要,自己改造之后放

vue使用富文本编辑器vue-quill-editor实现配合后台将图片上传至七牛

一.全局注册:main.js import Vue from 'vue' import VueQuillEditor, { Quill } from 'vue-quill-editor' import { ImageDrop } from 'quill-image-drop-module' import ImageResize from 'quill-image-resize-module' import 'quill/dist/quill.core.css' import 'quill/dis

在Django项目中使用富文本编辑器

1 开发要点 现在网上有很多的富文本编辑器,包括Markdown.tinymce.UEditor.KindEditor.ckeditor等等.在项目中使用这些编辑器主要有以下几个问题: 编辑页面 在HTML页面渲染编辑器: 定制编辑器的功能,比如有哪些文本样式.图片上传.代码插入: 定制编辑器的样式,指的是编辑器整体的样式,比如高度.宽度.显示位置等等: 预览内容: 获取内容: 显示页面 显示内容: 2 Django APP 下表列出一些常用的APP,它们都可以在GitHub上找的到,链接见下文

Django学习:使用富文本编辑器(15)

目前后台写博客的页面比较简陋,只能用来设置一些简单的文字,或者格式,而且编写不太方便.为了方便博客编写,可以使用富文本编辑器. 新增一篇文章进行测试 进入详情页,加粗效果并没有显示出来 修改详情页的模板页面blog_detail.html ----snip---- <div class='blog-content'>{{ blog.content|safe }}</div> ----snip---- 此时刷新详情页,加粗效果显示了出来. 但是在博客类型显示摘要的时候,会显示出<

在nuxt中使用富文本编辑器quill

在nuxtjs中使用quill富文本编辑器的时候遇到了一些问题,在此记录 1.下载 npm i quill --s npm i vue-quill-editor --s 2.在plugins下面新建文件vue-quill-editor.js写入以下内容,主要是用了自定义的工具栏 import Vue from 'vue'; import VueQuillEditor from 'vue-quill-editor'; import Quill from 'vue-quill-editor/node

【spring mvc】framework-core 跨域 使用用例

1.引入jar文件 <dependency> <groupId>cn.bidlink.nbl</groupId> <artifactId>framework-core</artifactId> <version>0.0.1-SNAPSHOT</version> </dependency> 2.添加spring mvc interceptor配置到springmvc-config.xml文件 <mvc:in

在Unity控制台下使用富文本

之前都不知道,最近看了csdn一位开发者的博文了然了 <b>asd</b> <color="red">asd</color> <size=20>asd</size>