vue里v-html解析html数据时只显示了文本内容图片地址出错!这是什么原因?怎么解决?

这个是我的代码请大佬指点,
解析返回数据content

<div class="card-content" v-html="article.content"></div>

这个是返回的数据
图片说明

如图所示只显示了文字没有显示图片

谁知道怎么用正则给里面的url地址加上一个/

在img src='upload'
这里upload前加一个/怎么实现
求大佬指点

0

3个回答

后台输出图片地址要写成绝对地址。或者,相对于当前浏览器加载的html文档的相对地址。
不能是相对于别的地方的相对地址

0

返回的路径不对,要是绝对路径

0

1、你的问题:str.replace(/需要替换的字符串/g,"新字符串");

<div class="card-content" v-html="article.content.replace(/upload/g,"/upload");"></div>

望采纳。

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue v-html指令解析文本以后,换行丢失解决
因为在做实际的业务需求web APP的时候,本身搭建框架是vue进行的 ,所以在做文本解析的时候,直接运用了指令v-html,但是问题出现了,文字,空格都可以解析,但是回车换行没有识别, 解决1:看了网上的方法,有些使用正则表达式进行匹配,替换,然后再进行渲染,我尝试了,但是我觉得有点麻烦 解决2:网上说的使用便签,我也尝试了,换行是有用了,但是我的文字太多了,原本多余的文字没有设置换行,所以这下...
(Vue2.0)在服务器返还数据中带有<img>标签时,用v-html渲染,better-scroll高度拉不到最底的问题
Vue2.0 + better-scroll + Promise
vux: v-html里的图片放大
具体情况就是从后台获取文章详情,用v-html的方法输出,怎么才可以实现点击图片令图片放大的效果。 关于图片放大的效果,可以调用vux的组件Previewer。 https://doc.vux.li/zh-CN/components/previewer.html 问题的难度是怎么给每个图片加上click事件呢?并且给每个事件附上index呢? 如果你用 P...
vue怎么使用v-html来实现双向数据绑定的功能呢?
contenteditable是html5 的新功能,contenteditable 属性规定元素内容是否可编辑。 所有主流浏览器都支持 都是支持的可以放心使用   &amp;lt;div contenteditable=&quot;true&quot; class=&quot;multiplyAnswers&quot;  v-html=&quot;fillanswer&quot; @input=&quot;fillanswer=$event.target.inne...
v-html中图片路径错误显示默认图
    这是后台返回的富文本,其中包含了&amp;lt; img/&amp;gt;标签,如果img标签的src路径不对,就不让他显示出来 上代码:   &amp;lt;div class=&quot;info-content info-page&quot; v-html=&quot;infoData.content&quot;&amp;gt;&amp;lt;/div&amp;gt;   let imgs = document.querySelectorAll('...
vue 中控制v-html 中的样式,但不影响全局的小技巧
我们知道在 Vue 中,style可以用两种方式来导入: // method1 @import ('./a.css'); //method2 &amp;lt;style src='./a.css'&amp;gt; 复制代码 但是不管哪一种,导进的css文件都是应用于全局的,有时候我们不想要这样的效果。而要使得css只对当前的组件有效,即局部应用。vue中提供了scoped属性,可以很好地解决该问题。 当我们有如...
使用v-html解决Vue.js渲染过程中html标签不能被解析(html标签显示为字符串)
在网页中,后台传来的json数据中包含html标签,将该json数据绑定到Vue.js中对象中,对该对象进行for循环,发现数据中的html标签不能被解析,而是当作字符显示出来。问题如下所示: 解决: Vue.js中提供了v-html这个指令来解决这个问题,或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象,就可以正常解析了。代码改动如下: 参考资料:
vue:为v-html中的内容设置样式
1. 在updated中找到目标元素,然后添加样式 updated () { // document.getElementById('caseContent') 包裹层 // 目标图片:width:100% let obj = document.getElementById('caseContent'); ...
规避使用 vue 的 v-html 指令的方法
一、引言前一阵子在写业务的时候,发现公司的代码里,有个场景是这样的:需要用户定义一些活动规则,然后在左边的手机预览图中,实时显示出这些活动规则。于是,同事用了一个带 v-html 指令的 <textarea> 标签,并且将双向数据绑定之后的变量 str 直接用 v-html="str" 将 str 绑定在 DOM 上,然后用户输入的规则显示在左边的预览图中。二、思考但我们在学 vue 的教程的时候,
vue结合html实时截取textarea文本
vue结合html实时截取textarea文本,获取鼠标下标,截取自定义文本,不错的demo
vue中 修改v-html指令中的样式 该如何操作呢?
在vue中 通过 v-html指令创建的 DOM 内容不受作用域内的样式影响 但是你可以通过深度作用选择器来为他们设置样式 如下图 可以 看看vue中css作用域 ...
vue中利用v-html按分号将文本换行
最近在开发的时候遇到这样一个需求,需要将一段文本按照分号(有中文分号和英文分号)进行换行操作。 如下:  换行前:雷军,2457.66万,自然人股东;洪锋,169.51万,自然人股东;黎万强,10.33万,自然人股东; 换行后:  雷军,2457.66万,自然人股东; 洪锋,169.51万,自然人股东; 黎万强,10.33万,自然人股东; 显示的html: &amp;lt;p class...
vue中v-html中标签添加CSS样式
在Vue组件中,我们可以使用&amp;lt;style scoped&amp;gt;标签来添加针对该组件的CSS样式。 &amp;lt;template&amp;gt; &amp;lt;div class=&quot;foo&quot;&amp;gt; &amp;lt;div v-html=&quot;myHtml&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/template&amp;gt
vue 指令 v-html 中使用过滤器filters功能
1问题原因:Vue2.0 不再支持在 v-html 中使用过滤器解决方法:1: 全局方法(推介)2: computed 属性3: $options.filters(推介)具体用法如下一页:21:使用全局方法可以在 Vue 上定义全局方法:Vue.prototype.msg= function (msg) {      return msg.replace(&quot;\n&quot;, &quot;&amp;lt;br&amp;gt;&quot;)};...
Vue:Vue基础知识之学会使用v-text、v-html两个指令
Vue:Vue基础知识之学会使用v-text、v-html两个指令 1、index.html文件 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;wi
Vue指令中的v-html和v-text
vue默认会把数据当成一个字符串进行分析,而不会对其中的dom节点进行分析。采用v-html可以让vue对dom的节点进行分析,如果要求不对dom节点进行分析的,可以采用v-text,或者什么也不写 代码如下: &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;p&amp;gt;{{html1}}&amp;lt;/p&amp;gt; &amp;lt;p v-text=&quot;html2&quot;&amp;gt;&amp;lt;/p&amp
Vue中解析html标签
vue中不解析html标签,会把html标签给正常输出,vue中提供了v-html来解决这一问题 正常情况下输出: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;zh&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt; &
vue中运用v-html渲染标签
获取后台数据带 标签 内容,需要渲染到页面展示。最终效果如下:图文排版 1.首先拿到数据,单独处理 2.接着在html中输出即可
vue v-html渲染富文本时的样式修改问题
v-text 或者 {{ }} 文本插值 v-html HTML插值 问题: v-html渲染的富文本无法在样式表中修改样式 解决方案: 在updated生命周期中,动态配置样式 updated() { // jquery方法修改 $('.box').find('p').css('color','#000') // refs th...
vue中使用v-html加载的富文本,css中定义样式不生效
如题,使用v-html加载一段富文本,富文本里包含图片,在手机上图片宽度可能会溢出 &amp;lt;div v-html=&quot;htmlContent&quot; class=&quot;rich&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;style scope&amp;gt; .rich&amp;gt;&amp;gt;&amp;gt; img{ display:block; max-width: 100%} &amp;
v-html 解析并插入 html 标签
1. 双大括号会将数据解释为普通文本,而非 HTML 代码。 &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;p id=&quot;a&quot;&amp;gt;Using mustaches: {{ rawHtml }}&amp;lt;/p&amp;gt; &amp;lt;p &amp;gt;Using v-html directive: &amp;lt;/p&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;body&a
vue在v-html的html字符串中绑定事件
需求: 需要在v-html的html字符串的button中绑定点击事件,需要点击后做一些操作,必须渲染成html,但是渲染后的html里面写绑定事件的代码没有经过vue编译,所以事件无效。 &amp;lt;div class=&quot;code-review&quot;&amp;gt; &amp;lt;div v-html=&quot;html&quot; v-highlight @click=&quot;addComment($event)&quot;&amp;gt;&amp;l...
Vue解析带html标签的字符串为dom
1.场景描述 如上接口中,content字段: content:&quot;&amp;lt;p&amp;gt;这是内容&amp;lt;/p&amp;gt;&quot; 需要在网页中现实如下效果: 2.解决方法 v-html &amp;lt;div class=&quot;blog-content&quot; v-html=&quot;curblog.content&quot;&amp;gt; &amp;lt;/div&amp;gt; v-html可以操作元素中的HTML标签
vue在v-html中绑定事件
需求:后台给的一部分数据需要绑定事件,然后根据需要绑定查看详情事件。 数据结构: { &quot;addr&quot;:&quot;1095b308dbcb8ad4791d56028b7f5731c7e655c7&quot;, &quot;balance&quot;:&quot;{\&quot;thisistest7\&quot;:94999900}&quot;, &quot;nonce&quot;:4, &quot;isToken&quot;:true } 由于balance是个字符串,需要点击
Vue学习之——v-html解决Vue.js渲染过程中html标签不能被解析
之前对接口遇到了接口数据中包含图片或音频的地址的格式,也就是图文混排格式,所以封装了字符串替换的方法。但是替换完之后就是下图,html不能解析。 Paste_Image.png 封装的图文混排解析方法: strToUrl: function(str) { if (!str || typeof str != &quot;string&quot;) r...
VUE v-html不能触发点击事件的解决方案
背景:后端返前端html格式的数据,前端用v-html解析渲染,如:&amp;lt;a @click=&quot;show(1)&quot;&amp;gt;&amp;lt;/a&amp;gt;,a标签能成功渲染,但其绑定的事件无法触发。 原因:vue没有将其作为vue的模板解析渲染 解决方案:不用v-html而是component模板编译 上干货: &amp;lt;template&amp;gt; &amp;lt;div class=&quot;hello&quot;&amp;gt;...
vue 从富文本传过来的数据如何渲染,有图片,点击放大效果
(vue,微信公众号) html内容如图所示,&quot;toolDetails.content&quot;是数据,从后台传过来的数据 js 如何从富文本传过来的数据筛选出图片,并且把所有图片地址取出来,运用 最重要一点想用wx.previewImage这个事件,需要引用微信环境,引用js,如以下代码 var script1 = document.createElement(&quot;script&quot;)...
初识vue之v-clock和v-text和v-html的区别
v-clock 配合{{ msg }}使用,可以隐藏{{ msg }} &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=“en”&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;初识Vue&amp;lt;title&amp;gt; &amp;lt;script src=&quot;https://cdn.jsde
react过滤后台富文本传来带标签的内容 react中像vue中v-html的方法
react过滤后台富文本传来带标签的内容 react中像vue中v-html的方法
Vuejs使用scoped(私有) style为v-html中标签添加CSS样式
最近使用Vue框架的时候遇到一个问题,就是后台把数据写好了,而且写好的数据的某些内容是html格式的,使用Vue框架的v-html虽然可以很简单的就把数据转换成html的标签渲染在页面上,但是有些样式得自己去微调,这时候就会发现,样式根本就无法调试,上网查了些资料,总算弄明白了。 其实只要给选择器添加上 `&amp;gt;&amp;gt;&amp;gt;`这个玩意就行了,但是我也遇到一些问题 这样子,直接在属性第...
vue中使用element 的表格时,表格数据有html标签,正确显示标签
作为小白,总容易遇见各种坑。下面来说一下问题和解决办法下面这段代码是正常引用element的表格,&amp;lt;el-table :data=&quot;tableData&quot; style=&quot;width: 100%&quot; highlight-current-row size:medium &amp;gt; &amp;lt;el-table...
vue 在使用v-html绑定的时候,里面的元素不会继承外部的css,解决方案
问题 想用vue绑定父文本生成的HTML内容添加css样式,但是发现CSS样式根本不生效,选择器没起作用 解决方案: scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css. 解决的话把scoped属性去掉就行了
vue 动态渲染 html标签解决方案 v-html
是这样,我碰到的问题 是  数据库循环出来的字段是一个html字符串   是要拼到页面上的  这时候   很简单  其实    v-html 举个栗子   直接是就   v-html就可以了,这是VUE2.0之后  的写法 ,还不懂就到我的QQ群来,我来给你说吧 好, 我的 群153181864  前端交流群 ,绝对原创,转载请附上 本微博链接。
vue项目中,使用v-html后样式没法改变
在vue单页模式中为了防止页面之间的样式互相影响,会加上scoped,之后就互相不受影响了,但是在使用 v-html时候样式没法改变,去掉scoped之后就可以了, ...
在vue中修改编辑器html内容的图片样式(ueditor)
公司的需求是实现类似淘宝商品详情(通过图片拼接,大家都很清楚,淘宝详情一般都是采用多张图进行拼接) 文字的描述大家可能会觉得很枯燥无味,觉得代码才是最好的老师 作者将会详细地去讲解代码,在代码中找到自己的灵感!使用js实现也差不多是如此的套路。 &amp;lt;!-- 此页面是单页面 --&amp;gt; &amp;lt;!--作者将会详细地去讲解代码,在代码中找到自己的灵感!--&amp;gt; &amp;lt;template...
v-html加过滤器
之前我们如果想要对展示的代码进行过滤,可以直接像下面这样 但是会发现这样之后内容完全展示不出来了,这是因为vue进行改版之后,我们不能在v-html里面直接这样使用过滤器了。 那么既然不能直接使用,那我们可以把我们的过滤放在函数里面,然后去调用这个函数啊。我们就可以这样写: 这样一来我们就解决这个问题啦!!...
vue删除html内容的标签样式
安装依赖包 cnpm  install  js-striphtml 使用: 删除标签样式: var striphtml = require('js-striphtml'); striphtml.striptags('I am a HTML string.', [ 'b' ]); // Returns "I am a HTML string." 删除标签样式(保留指定样式)
vue中使用v-html,v-html中js代码不生效的问题
templateContent 是后台返回的html片段,以及css样式和js,但是返回的 js是不执行的,因为浏览器在渲染的时候并没有将js渲染,这时要在$nextTick中动态创建script标签并插入 如图 regJs就是js代码片段,至于怎么获取js代码片段在我的上一篇博客中有,但是别忘了 将this.$nextTick放在一个方法中,并调用,否则 代码不执行 也不会 ...
element-ui 表格数据html 格式解析
&amp;lt;el-table-column label=&quot;命中字段&quot; width=&quot;180&quot; align=&quot;center&quot;&amp;gt;       &amp;lt;template slot-scope=&quot;scope&quot;&amp;gt;              &amp;lt;div v-html=&quot;scope.row.Company&quot;&amp;gt;&amp;lt;/div&amp;gt;  
【VueJS】为防止暴露 {{xxx}} 而诞生的v-text & v-html
之前我们在html中输出data中的值时用的是 {{xxx}} ,这种情况是有弊端的:当网速很慢或JavaScript出错时,会暴露 {{xxx}} 。Vue给我们提供的 v-text 就是解决这个问题的。我们来看代码:<h1>v-text & v-html 案例</h1> <hr> <div id="app"> <span>{{ message }}</span>=<span v-text
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 区块链解决 网页里怎么制作课程表

相似问题

3
vue里v-html解析html数据时只显示了文本内容图片地址出错!这是什么原因?怎么解决?
1
请问怎么在html页面点击一个地址位置 Bing地图自动显示该位置的地图
0
WIN7的IE11浏览器用video标签看手机拍的视频怎么是横着的
1
微信X5同层播放器退出,控制父级display:none 退出我会出现1秒的黑屏,请问办法解决吗?
3
在修改班级信息时修改了班级编号,保存时老提示班级名称重复
1
AnimateCC H5怎么用event.offsetX/Y实现同步拖拽?
2
js怎么实现移动H5页面手势画圈解锁后跳转页面
2
给document.documentElement.scrollTop赋值以后怎么返回成可变量?
2
web前端textarea的value有初始内容时,怎么实现文本域自适应
0
Google Map API 想实现根据搜索到的地址给它描边的功能
1
vs2010打包msi程序,如何在安装时自动一个vbs或者bat脚本文件
2
请问一下大家github的README里面一些小图片怎么打
1
怎么用结合树做查询功能
3
h5 img 多张图片拼接一张图片有缝隙
1
jquery复选框里面的内容选定后 , 根据后台状态换掉相应选项的图片
0
请问这个什么原因造成的 ,同时部署到两台服务器,一台正常访问 另一台出现如下错误 ,求解
3
爬取网站上数据,爬下内容不全
4
canvas与webSocket在移动端做电子签名时滑动太快,pc端同步展示时出现断点或者虚线?
2
ajax接受php从服务器获取的大量数据(十万条数据)如何全部渲染在浏览器中
5
thinkphp 怎么在视图层写一个按钮,按一次后就表灰色,不能按两次