vue v-html 富文本图片附件前图标显示问题

vue v-html 富文本图片溢出，解决图片溢出问题之后会出现附件的图片也是100%显示

如图所示：附件前面的图片也是100%

解决方案：给富文本中所有图片增加 class

富文本

JavaScript

handleHtml(rich) {//使用正则表达式匹配所有图片let reg = RegExp(/<[img]+\s+(.*?)(?<id>\w*?)[\s'"](.*?)>/g);let match = rich.match(reg);if (match) {//循环图片数组for (let i = 0; i < match.length; i++) {const item = match[i];//根据判断条件添加不同classif (item.includes("title=")) {let len = item.length;let _str = item.slice(0, len - 2) + " class=\"l-img\"/>";//追加 class 之后的imgrich = rich.replace(item, _str);} else {let len = item.length;let _str = item.slice(0, len - 2) + " class=\"l-file-img\"/>";//追加 class 之后的imgrich = rich.replace(item, _str);}}}console.log("处理之后", rich);return rich;
}

scss

<style lang="scss" scoped>
.rich-box {background-color: #ffffff;::v-deep {.l-img {max-width: 100%;}}
}
</style>

最终效果：

注：可以根据自己的判断条件增加不同的 class，具体根据项目去处理

vue v-html 富文本图片附件前图标显示问题相关推荐

zx-quill+vue+element实现富文本图片上传到服务器
quill富文本编辑器图片默认是base64数据流,我们要实现把图片上传到服务器这个需求,quill中并没有找到相关配置 https://www.jianshu.com/p/9e4e4d955d0f ...
elementui图片上传php,vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
vue+element-ui实现富文本(含有图片粘贴拖拽上传)
vue+element-ui实现富文本(含有图片粘贴拖拽上传) Just For Share | 仅仅分享首先需要安装 cnpm i vue-quill-editor -D 富文本编辑器 cnpm ...
vue h5 端实现富文本图片预览（基于 Vant UI 的 ImagePreview 组件）
文章目录 vue h5 端实现富文本图片预览(基于 Vant UI 的 ImagePreview 组件) 预览效果关键代码使用案例 vue h5 端实现富文本图片预览(基于 Vant UI 的 I ...
vue+php使用七牛云存储解决富文本图片冗余问题
解决服务器中图片冗余的方法很多,本篇介绍利用七牛云自带的api解决图片冗余问题问题: 在前端编辑富文本上传图片时,一般有两种方式,一种是将图片在本地预览,文件则在本地缓存,一种是直接上传服务器,然后 ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
html加载富文本_富文本图片懒加载解决方案
图片懒加载,作为性能优化的一部分,想必我们并不陌生. 在React.Vue项目中,我们都可以引入对应的NPM包处理图片懒加载,如 lazyload.react-lazyload.vue-lazyloa ...
java freemarker 图片_java通过freemarker导出包含富文本图片的word文档
废话不多说,进入正题! 本文重点在于:对富文本图片的导出(基础的freemarker+word模板导出这里不做详细解说哈) (ps:大神的东西太深奥~~懵逼了一周才搞定,为了方便后来在更加简单,清晰 ...

vue v-html 富文本图片附件前图标显示问题

解决方案：给富文本中所有图片增加 class

vue v-html 富文本图片附件前图标显示问题相关推荐

最新文章

热门文章