vue 富文本编辑图片提取并定位图片src

最新推荐文章于 2024-09-02 18:44:03 发布

置顶前端黑眼圈

最新推荐文章于 2024-09-02 18:44:03 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_36595944/article/details/106302944

版权

vue 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一种在Vue中实现图片预览的方法，通过监听div元素上的点击事件，检查目标元素是否为图片，如果是，则使用ImagePreview插件展示图片。此功能增强了用户交互体验，适用于需要展示商品详情的电商网站。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div
v-if="goods.detail2Show"
class="goods-detail-intro-content"
@click="imgDetao($event)"
>{{ goods.detail2 }}</div>

imgDetao(e)
 {
      // ImagePreview([item]);
      if (e.target.nodeName === "IMG")
      {
          console.log(">>>>>", e.target.currentSrc);
          ImagePreview([e.target.currentSrc]);
      }
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端黑眼圈

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue - 解析富文本（v-html 指令）

王二红

04-23

1万+

前言如果您的项目只是解析简单的富文本，那么推荐使用本文的解决方案，反之建议您使用功能齐全的第三方插件。很多系统都会有解析富文本的需求，例如以下富文本数据， `<h1>李拴蛋</h1> <ahref="http://www.baidu.com">百度</a> <spanstyle="color:red">红色文字</span><br> <imgsrc="https://fuss10.elemecdn.com

vue篇1-1：获取富文本中的图片使用微信js-jdk实现点击图片预览

草莓味的狗儿博客

06-06

1337

就目前做的一个vue公众号项目需要点击富文本中图片预览效果。实现： 1.引入微信js-jdk 文件（1）使用npm命令： npm install weixin-js-sdk --save 然后在需要页面引入 import wx from "weixin-js-sdk"; （2）在路由组件里面的，creatd()和mounted()里面放代码 2.在页面渲染富文本内容里找到标签实现点击预览； ...

参与评论您还未登录，请先登录后发表或查看评论

js获取富文本中的第一张图片(正则表达式)

10-15

主要介绍了js获取富文本中的第一张图片url正则表达式及去除字符串里面的html标签的正则公式,需要的朋友可以参考下

vue 从富文本文档中将照片的的路径取出

weixin_53740842的博客

08-31

617

在以富文本文档存进数据库中后,有图片和文字叙述,网页需要将图片单独取出进行以下操作。

vue/vant获取富文本中的图片预览

NanChen的博客

01-28

3079

详解vant中的图片富文本预览效果实现效果

vue 如何拿到后台传回的富文本中的img，进行9宫格排列展示以及相关处理

weixin_30608131的博客

02-19

902

描述： res.data.list 返回的数组，数组中的每个对象有一个 content，就是传回来的富文本的内容，要拿到这里面的所有的img，进行9宫格排列处理； 1、letimg = this.getObjectKeys(item.content.match(/<img[^>]+>/g)); 　　抓取到每个content中的 img，成为数组，但是可能存在方法不...

vue获取富文本中的图片链接

zhoulib__的博客

11-24

1514

通过点击获取事件源对象来实现 <div @click="getImg($event)" style="padding:15px;"> <div v-html="content"></div>  </div> <script> getImg($event) { let url = $event.target.currentSrc if (url) { co

Vue 3 富文本编辑器组件详解

2401_86113453的博客

09-02

5907

本文所述的Vue组件旨在提供一个可高度自定义的富文本编辑器。富文本内容编辑工具栏配置自定义图片上传与插入通过v-model实现双向数据绑定异步加载并渲染图片在富文本编辑器中，模态框（如图片上传、链接插入等）是常见的交互元素。为了让这些模态框符合我们的UI风格，我们通常需要自定义它们的样式和位置。图片上传是富文本编辑器中的重要功能。通常，我们需要自定义上传逻辑，以便将图片上传到服务器，并将服务器返回的图片信息插入到编辑器中。

vue-html5-editor富文本编辑器抓取网络图片本地化

w284511883的博客

05-04

616

在研究使用vue-html5-editor的过程中，并没有发现对于复制粘贴过来图片的单独处理，倒是有一个insertImageUrl方法用来处理图片通过url粘贴过来的逻辑，不会重写该方法且该方法只针对通过图片功能上传的方式，因此放弃了。3、调用后台接口，参数为url链接，通过后台接口访问图片链接并保存图片到自己的服务器，然后返回自己的服务器的图片url链接（这块我没有实现，我简单用base64做了测试）；本人基础只是不太扎实，如果有哪里需要优化的可以在评论区一起交流，另外欢迎补充返回url的代码。

从富文本(html字符串)中获取图片,js获取富文本中的第一张图片(正则表达式)

weixin_39978863的博客

06-04

2521

js获取富文本中的第一张图片url正则公式及去除字符串里面的html标签后台发来一个富文本字符串里面可能包含了0、1、2、3…个图片标签(img),我们的任务是获取这个字符串里面第一张图片的url，如果没有图片则返回空var imgurlfun = function(str){var data = ''; str.replace(/]*src=['"]([^'"]+)[^>]*>/...

vue 图片宫格_vue 如何拿到后台传回的富文本中的img，进行9宫格排列展示以及相关处理...

weixin_36185970的博客

12-23

921

描述： res.data.list 返回的数组，数组中的每个对象有一个 content，就是传回来的富文本的内容，要拿到这里面的所有的img，进行9宫格排列处理；1、letimg = this.getObjectKeys(item.content.match(/]+>/g));抓取到每个content中的 img，成为数组，但是可能存在方法不标准，getObjectKeys 进行一下标...

vue富文本 图片处理

weixin_45896379的博客

02-04

1160

<template> <div> <el-upload class="avatar-uploader2" :action="uploadImgUrl" name="file" :show-file-list="false" :on-success="uploadSuccessEdit" :before-upload="beforeUploadEdit" > </el-

提取富文本里得图片_小程序实践：基础内容之rich-text，如何单击预览rich-text中的图片并保存？...

weixin_35835184的博客

01-10

967

使用正则表达式给富文本图片标签添加域名进行展示、删除域名提交

qq_43675010的博客

09-26

1093

对于大部分前端来说，富文本是我们经常需要接触的组件之一，往往我们需要回显的时候，后端都是返回不带域名的图片地址，我们这时候是展示不出来，因为这不是一个完整的图片地址。后端不帮忙解决，那就前端来搞，接下来我们需要使用正则表达式把我们的域名拼接到富文本的图片标签中去就能展示了，同理，在提交的时候，我们再把域名删除即可。因为后端是不需要域名的富文本图片标签的，方便以后图片地址环境的更换和维护。代码很简单：在需要添加域名展示： this.productForm.Describe = res.Data.D.

（v-html）富文本中的图片操作

--=

02-22

482

（v-html）富文本中的图片操作

vue富文本

weixin_38999134的博客

06-13

392

富文本

富文本里摘出每个img标签内容

黑眼圈

05-12

1110

let textareaHtml = response.detail; // 循环，分别取出每个item的富文本内容 let img = textareaHtml.match(/<img[^>]+>/g); // 利用正则，取出所有img标签，数据格式为数组 console.log(img, "textareaHtml"); let arrImg = ""; // 定义空

vue项目 vue-quill-editor富文本编辑器+图片上传

余白x的博客

08-16

2780

serverUrl

python 通过selenium 定位图片后获取src属性

最新发布

02-06

### Vue 项目中的国际化文本提取方法在 Vue 项目中实现国际化（i18n），通常会涉及到从组件模板、JavaScript 文件以及其他资源文件中提取待翻译的字符串。以下是几种常见的文本提取方式及其使用的工具。 #### 使用 vue-i18n 和 i18next-extract 提取静态文本对于基于 `vue-i18n` 的应用来说，可以借助于像 `i18next-parser` 或者 `vue-gettext` 这样的工具来扫描整个项目的源码并自动收集所有的 `$t()` 函数调用所传递给它的参数作为需要被翻译的消息[^1]。 ```bash npm install --save-dev @dudushka/i18next-parser ``` 配置 `.parser.js`： ```javascript module.exports = { input: ['./src/**/*.js', './src/**/*.vue'], output: './locales/en/translation.json', options: { debug: true, removeUnusedKeys: false, sort: true, func: { list: ['this.$t', '$t'], // 支持的方法名列表 extensions: ['.js', '.vue'] }, lngs: ['en', 'zh'], // 所有支持的语言环境缩写形式 ns: ['translation'] // 命名空间名称，默认为 "translation" } }; ``` 运行命令以执行解析过程： ```bash node ./.parser.js ``` 这将会把所有找到的关键字保存到指定路径下的 JSON 文件里供后续编辑器使用或交给专业的译员处理。 #### 处理动态内容与富文本 当面对由服务器端返回的数据流构成的内容时，则可能需要用到自定义逻辑去遍历这些对象树形结构从而获取其中嵌入的文字片段；而对于 HTML 片段内的文字部分可以通过正则表达式匹配的方式完成初步过滤后再做进一步加工以便加入到本地化的流程之中[^2]。例如，在某些情况下，如果接收到未经转义处理过的HTML代码，那么应当先对其进行适当的安全编码操作之后才能安全地插入DOM节点内展示出来。这里提供了一个简单的辅助函数用于此目的: ```javascript function escapeHtml(unsafe) { return unsafe.replace(/[<>"'&]/g, function (m) { switch (m) { case '<': return '<'; case '>': return '>'; case '"': return '"'; case "'": return '''; case '&': return '&'; default: break; } }); } ``` 通过上述手段能够有效地保障应用程序内部各个层面都能良好兼容多语言特性的同时也提高了开发效率减少了人为失误带来的风险。