当前位置：首页 > news >正文

v-html 显示富文本内容

news 来源：原创 2025/7/19 2:24:00

返回数据格式：只有图片名称显示不出完整路径

解决方法：在接收数据后手动给img格式的拼接vite.config中的服务器地址

页面：

<el-button @click="">获取信息<el-button><!-- 弹出层 -->
<el-dialog v-model="dialogVisible" width="70%" draggable @close="dialogVisible = false":fullscreen="fullscreenShow" :loading="dialogLoading"><template #title><div class="dialog-title"><div> </div><el-icon class="icon-btn" @click="fullscreenShow = !fullscreenShow" :size="14"><full-screen v-if="!fullscreenShow" /><aim v-else /></el-icon></div></template><!-- 内容--><div v-html="dialogContent" class="content-style"></div>
</el-dialog>

const dialogLoading =  ref(false) // 正在加载
const dialogVisible =  ref(false)  // 弹窗显隐
const fullscreenShow = ref(false) // 全屏显示
const dialogContent=  ref()  // 显示内容const openDialog = (row) => {dialogVisible.value = true; // 打开弹窗try {dialogLoading.value = true;getOneData(row.PAGE_SEQ).then(res => {if (res.code) {let resData = res?.data;const baseUrl = "http://ceshi.hhhhhhh.nett";dialogContent.value = resData.CONT.replace(/src="\//g, `src="${baseUrl}/`);} else {}})} finally {dialogLoading.value = false;}
};

样式：

.dialog-title {display: flex;justify-content: space-between;
}.icon-btn {margin-top: -2px;margin-right: -5px;color: #909399;
}.icon-btn:hover {background-color: #fff;
}

效果：

v-html 显示富文本内容

返回数据格式： 只有图片名称显示不出完整路径解决方法：在接收数据后手动给img格式的拼接vite.config中的服务器地址页面： <el-button click"">获取信息<el-button> <el-dialog v-model&…...

编程日记 2025/7/19 2:24:00

UWB与GPS技术融合的室内外无缝定位方案

‌ 一、技术原理与互补性‌ ‌双模定位机制‌ ‌室外场景‌：GPS/北斗提供‌10-30厘米级定位精度‌（RTK技术辅助），覆盖露天区域。‌室内场景‌：UWB通过‌TOF/TDOA算法‌实现‌10-50厘米级定位精度‌，穿透金…...

编程日记 2025/7/8 0:41:35

AiEditor v1.3.8 发布

2025 年 4 月 22 日，AI 富文本编辑器 AiEditor 发布了 v1.3.8 版本。 AiEditor 是一个面向 AI 的下一代富文本编辑器，基于 Web Component 开发，支持 Layui、Vue、React、Angular 等几乎任何前端框架，适配 PC Web 端和手机端&#…...

编程日记 2025/7/19 2:12:01

从零学会epoll的使用和原理

从零学会epoll的使用和原理第一步：理解 select / poll 的缺陷一、select 和 poll 是什么？ 它们是 Linux 提供的 I/O 多路复用机制，可以让我们同时监听多个文件描述符（fd），比如 socket，来等…...

编程日记 2025/7/19 2:19:46

XHTMLConverter把docx转换html报java.lang.NullPointerException异常

一.报错 1.报错信息 org.apache.poi.xwpf.converter.core.XWPFConverterException: java.lang.NullPointerExceptionat org.apache.poi.xwpf.converter.xhtml.XHTMLConverter.convert(XHTMLConverter.java:77)at org.apache.poi.xwpf.converter.xhtml.XHTMLConverter.doConve…...

编程日记 2025/7/19 2:16:02

教育科技质检的三重挑战质检LIMS系统在教育技术研发的应用

在教育技术研发领域，实验室作为产品验证的核心环节，其质检效率与数据安全性直接关乎企业的创新竞争力。LIMS（实验室信息管理系统）作为贯穿检测全流程的数字化中枢，正在成为教育科技企业的"质量守护者"。本文…...

编程日记 2025/7/19 1:46:52

MySQL最左前缀原则深度解析：优化索引设计的核心法则

一、什么是最左前缀原则？ 最左前缀原则（Leftmost Prefix Principle） 指在使用复合索引（Composite Index）时，MySQL会按照索引定义的列顺序，从左到右匹配查询条件。只有连续且从最左侧开始的列组…...

编程日记 2025/7/16 21:30:35

多模态大语言模型arxiv论文略读（三十五）

On the Out-Of-Distribution Generalization of Multimodal Large Language Models ➡️ 论文标题：On the Out-Of-Distribution Generalization of Multimodal Large Language Models ➡️ 论文作者：Xingxuan Zhang, Jiansheng Li, Wenjing Chu, Junjia…...

编程日记 2025/7/19 1:54:59

Linux 安装pm2并全局可用

前言本文基于：操作系统 CentOS Stream 8 使用工具：Xshell8、Xftp8 服务器基础环境： node - 请查看 Linux安装node并全局可用所需服务器基础环境，请根据提示进行下载、安装。 1.安装依赖 npm install pm2 -g2.配置全局软链…...

编程日记 2025/7/19 1:46:53

39.剖析无处不在的数据结构

数据结构是计算机中组织和存储数据的特定方式，它的目的是方便且高效地对数据进行访问和修改。数据结构表述了数据之间的关系，以及操作数据的一系列方法。数据又是程序的基本单元，因此无论是哪种语言、哪种领域，都离不开数据结构&a…...

编程日记 2025/7/19 2:08:23

基于 Vue 的Tiptap 富文本编辑器使用指南

目录 🧰 技术栈 📦 所需依赖 📁 文件结构 🧱 编辑器组件实现（components/Editor.vue） ✨ 常用操作指令 🧠 小贴士 🧩 Tiptap 扩展功能使用说明（含快捷键与命令&am…...

编程日记 2025/7/19 2:04:46

【音视频】AAC-ADTS分析

AAC-ADTS 格式分析 AAC⾳频格式：Advanced Audio Coding(⾼级⾳频解码)，是⼀种由MPEG-4标准定义的有损⾳频压缩格式，由Fraunhofer发展，Dolby, Sony和AT&T是主要的贡献者。 ADIF：Audio Data Interchange Format ⾳…...

编程日记 2025/7/19 1:42:40

vue中将elementUI和echarts转成pdf文件

若要将包含 ElementUI 组件数据和多个 ECharts 图表的数据转换为 PDF 文档，可结合 html2canvas、jspdf 以及 dom-to-image 来实现。其中，html2canvas 和 dom-to-image 可将 ECharts 图表转换为图片，jspdf 则用于生成 PDF 文档。对于 ElementU…...

编程日记 2025/7/19 2:06:32

基于 Electron、Vue3 和 TypeScript 的辅助创作工具全链路开发方案：涵盖画布系统到数据持久化的完整实现

基于 Electron、Vue3 和 TypeScript 的辅助创作工具全链路开发方案：涵盖画布系统到数据持久化的完整实现引言在数字内容创作领域，高效的辅助工具是连接创意与实现的关键桥梁。创作者需要一款集可视化画布、节点关系管理、数据持久化于一体的专业工具&…...

编程日记 2025/7/19 2:00:03

本地部署DeepSeek-R1模型接入PyCharm

以下是DeepSeek-R1本地部署及接入PyCharm的详细步骤指南，整合了视频内容及官方文档核心要点：一、本地部署DeepSeek-R1模型 1. 安装Ollama框架下载安装包访问Ollama官网（https://ollama.com/download）或通过视频提供的百度云盘链接下载对应系统的安装包。Windows用户…...

编程日记 2025/7/19 2:14:11

基于LightGBM-TPE算法对交通事故严重程度的分析与可视化

基于LightGBM-TPE算法对交通事故严重程度的分析与可视化原文： Analysis and visualization of accidents severity based on LightGBM-TPE 1. 引言部分文章开篇强调了道路交通事故作为意外死亡的主要原因，引起了多学科领域的关注。分析事故严重性特…...

编程日记 2025/7/19 1:58:15

音视频小白系统入门课-3

本系列笔记为博主学习李超老师课程的课堂笔记，仅供参阅往期课程笔记传送门： 音视频小白系统入门笔记-0音视频小白系统入门笔记-1音视频小白系统入门笔记-2 视频： 由一组图像组成：像素、分辨率、RGB 8888(24位) 、RGBA(32位)为…...

编程日记 2025/7/19 1:54:59

考研系列-计算机网络-第五章、传输层

一、传输层提供的服务 1.重点知识...

编程日记 2025/7/19 1:58:14

将Ubuntu系统中已有的Python环境迁移到Anaconda的虚拟环境中

需求：关于如何将Ubuntu系统中已有的Python环境迁移到Anaconda的虚拟环境test2里，而且他们提到用requirements.txt 安装一直报错，所以想尝试直接拷贝的方法。可以尝试通过直接拷贝移植的方式迁移Python环境到Anaconda虚拟环境，但…...

编程日记 2025/7/19 2:14:12

AI 数字短视频数字人源码开发：多维赋能短视频生态革新

在短视频行业深度发展的进程中，AI 数字短视频数字人源码开发凭借其独特的技术优势，从多个维度为行业生态带来了革命性的变化，重塑短视频创作、传播与应用的格局。数据驱动，实现内容精准化创作 AI 数字短视频数字人源码开发能够深…...

编程日记 2025/7/19 1:45:58

ffmpeg 硬解码相关知识

一：FFMPEG 支持的硬解方式：如下都是了解知识 DXVA2 - windows DXVA2 硬件加速技术解析‌ ‌一、核心特性与适用场景‌ ‌技术定义‌：DXVA2（DirectX Video Acceleration 2）是微软推出的基于 DirectX 的硬件加速标准…...

编程日记 2025/7/15 11:32:19

Ubuntu数据连接访问崩溃问题

目录一、分析问题 1、崩溃问题本地调试gdb调试： 二、解决问题 1. 停止 MySQL 服务 2. 卸载 MySQL 相关包 3. 删除 MySQL 数据目录 4. 清理依赖和缓存 5.重新安装mysql数据库 6.创建程序需要的数据库三、验证 1、动态库更新了 2、头文件更新了 3、重新…...

编程日记 2025/7/19 2:01:10

边缘计算全透视：架构、应用与未来图景

边缘计算全透视：架构、应用与未来图景一、产生背景二、本质三、特点（一）位置靠近数据源（二）分布式架构（三）实时性要求高四、关键技术（一）硬件技术（二&#…...

编程日记 2025/7/19 1:54:04

迅为iTOP-RK3576开发板/核心板6TOPS超强算力NPU适用于ARM PC、边缘计算、个人移动互联网设备及其他多媒体产品

迅为iTOP-3576开发板采用瑞芯微RK3576高性能、低功耗的应用处理芯片，集成了4个Cortex-A72和4个Cortex-A53核心，以及独立的NEON协处理器。它适用于ARM PC、边缘计算、个人移动互联网设备及其他多媒体产品。支持INT4/INT8/INT16/FP16/BF16/TF32混合运算&a…...

编程日记 2025/7/19 2:03:48

前沿分享｜技术雷达202504月刊精华

本期雷达 ###技术部分 7. GraphRAG 试验在上次关于检索增强生成（RAG）的更新中，我们已经介绍了GraphRAG。它最初在微软的文章中被描述为一个两步的流程： （1）对文档进行分块，并使用基于大语言…...

编程日记 2025/7/19 1:54:03

[创业之路-380]：企业法务 - 企业经营中，企业为什么会虚开増值税发票？哪些是虚开増值税发票的行为？示例？风险？

一、动机与风险 1、企业虚开增值税发票的动机利益驱动骗抵税款：通过虚开发票虚增进项税额，减少应纳税额，降低税负。公司套取国家的利益。非法套现：虚构交易开具发票，将资金从公司账户转移至个人账户，用…...

编程日记 2025/7/19 2:04:46

嵌入式：ARM公司发展史与核心技术演进

一、发展历程：从Acorn到全球算力基石 1. 起源（1978-1990） 1978年：奥地利物理学家Hermann Hauser与工程师Chris Curry创立剑桥处理器公司（CPU Ltd.），后更名为**艾康电脑（Acor…...

编程日记 2025/7/19 2:05:39

ubuntu的各种工具配置

1.nfs：虚拟机桥接模式下，开发板和虚拟机保持在同一网段下，开发板不要直连电脑挂载命令：mount -v -t nfs 192.168.110.154:/home/lhj /mnt -o nolock (1) 安装 NFS 服务器 sudo apt update sudo apt install nfs-kernel-server -y…...

编程日记 2025/7/19 2:03:48

Go 剥离 HTML 标签的三把「瑞士军刀」——从正则到 Bluemonday

1 为什么要「剥皮」？ 安全：去掉潜在的 <script onload…> 等恶意标签，防止存储型 XSS。可读性：日志、消息队列、搜索索引里往往只需要纯文本。一致性：不同富文本编辑器生成的 HTML 五花八门，统一成「…...

编程日记 2025/7/19 2:18:44

【Java面试笔记：基础】6.动态代理是基于什么原理？

1. 反射机制定义：反射是 Java 语言提供的一种基础功能，允许程序在运行时自省（introspect），直接操作类或对象。功能： 获取类定义、属性和方法。调用方法或构造对象。运行时修改类定义。应用场景&#xff…...

编程日记 2025/7/19 1:51:47

docker容器中uv的使用

文章目录 TL;DRuv简介uv管理项目依赖step 1step 2WindowsLinux/Mac step 3依赖包恢复在Docker容器中使用uv TL;DR 本文记录uv在docker容器中使用注意点, uv简介 uv是用rust编写的一个python包管理器，特点是速度快，且功能强大，目标是替代p…...

编程日记 2025/6/29 11:38:14

分部积分选取u、v的核心是什么？

分部积分选取u、v的核心是什么？是反对幂指三吗？ 不全是，其实核心是：v要比u更容易积分，也就是更容易求得原函数，来看一道例题：...

编程日记 2025/7/19 1:48:07

Android Studio调试中的坑二

下载新的Android studio Meerkat后，打开发现始终无法更新对应的SDK，连Android 15的SDK也无法在SDK Manger中显示出来，但是Meerkat必须要使用新版本SDK。 Android studio下载地址命令行工具 | Android Studio | Android Developers 解决…...

编程日记 2025/7/19 1:55:01

【Redis】缓存三剑客问题实践（上）

本篇对缓存三剑客问题进行介绍和解决方案说明，下篇将进行实践，有需要的同学可以跳转下篇查看实践篇：（待发布） 缓存三剑客是什么？ 缓存三剑客指的是在分布式系统下使用缓存技术最常见的三类典型问题。它们分…...

编程日记 2025/7/19 1:56:27

2025年4月22日（平滑）

在学术和工程语境中，表达“平滑”需根据具体含义选择术语。以下是专业场景下的精准翻译及用法解析： 1. 数学/信号处理中的「平滑」（消除噪声） Smooth (verb/noun/adjective) “Apply a Gaussian filter to smooth the noisy signa…...

编程日记 2025/7/19 1:49:01

给vue-admin-template菜单栏 sidebar-item 添加消息提示

<el-badge :value"200" :max"99" class"item"><el-button size"small">评论</el-button> </el-badge>  <template><div v-if"!item.hidden" class&q…...

编程日记 2025/7/19 2:16:04

C++（初阶）（十二）——stack和queue

十二，stack和queue 十二，stack和queueStackQueuepriority_queue 简单使用模拟实现deque Stack 函数说明stack()构造空栈empty()判断栈是否为空size()返回栈的有效元素个数top()返会栈顶元素的引用push()将所给元素val压入栈中pop()将栈的尾部元素弹出 …...

编程日记 2025/6/29 11:50:27

数据采集：AI 发展的基石与驱动力

人工智能（AI）无疑是最具变革性的技术力量之一，正以惊人的速度重塑着各行各业的格局。从智能语音助手到自动驾驶汽车，从精准的医疗诊断到个性化的推荐系统，AI 的广泛应用已深刻融入人们的日常生活与工作的各个层面。而在…...

编程日记 2025/7/15 2:59:41

Kubernetes Docker 部署达梦8数据库

Kubernetes & Docker 部署达梦8数据库一、达梦镜像获取目前达梦官方暂未在公共镜像仓库提供Docker镜像，需通过达梦官网联系获取官方镜像包。二、Kubernetes部署方案部署配置文件示例 apiVersion: apps/v1 kind: Deployment metadata:labels:app: dm8na…...

编程日记 2025/6/29 9:35:23

宏碁笔记本电脑怎样开启/关闭触摸板

使用快捷键：大多数宏碁笔记本可以使用 “FnF7” 或 “FnF8” 组合键来开启或关闭触摸板，部分型号可能是 “FnF2”“FnF9” 等。如果不确定，可以查看键盘上的功能键图标，一般有触摸板图案的按键就是触摸板的快捷键。通过设备管理器…...

编程日记 2025/6/29 12:15:14

计算机组成与体系结构：缓存（Cache）

目录为什么需要 Cache？ 🧱 Cache 的分层设计 🔹 Level 1 Cache（L1 Cache）一级缓存 🔹 Level 2 Cache（L2 Cache）二级缓存 🔹 Level 3 Cache（L3 Cache&am…...

编程日记 2025/7/14 12:09:48

【VS Code】打开远程服务器Docker项目或文件夹

1、配置SSH连接在VS Code中，按CtrlShiftP打开命令面板。输入并选择Remote-SSH: Connect to Host...。输入远程服务器的SSH地址（例如userhostname或userip_address）。如果这是您第一次连接到该主机，VS Code可能会要求您配置…...

编程日记 2025/6/29 10:04:51

docker 常见命令

指定服务名查看日志 docker-compose logs -f doc-cleaning docker inspect id 启动所有服务在docker-compose目录下 docker-compose up -d docker-compose down会删除容器和网络 docker compose stop redis rabbitmq docker compose stop可以快速停止服务，方…...

编程日记 2025/7/17 10:52:26

C#抽象类和虚方法的作用是什么？

抽象类 (abstract class)： 不能直接实例化，只能被继承。用来定义一套基础框架和规范，强制子类必须实现某些方法（抽象方法）。可用来封装一些共通的逻辑，减少代码重复。虚方法 (virtual)： …...

编程日记 2025/6/29 10:50:52

redis数据类型-基数统计HyperLogLog

redis数据类型-基数统计HyperLogLog 文档 redis单机安装redis常用的五种数据类型redis数据类型-位图bitmap 说明官网操作命令指南页面：https://redis.io/docs/latest/commands/?nameget&groupstringHyperLogLog介绍页面：https://redis.io/docs…...

编程日记 2025/6/29 9:35:31

音视频学习 - MP3格式

环境 JDK 13 IDEA Build #IC-243.26053.27, built on March 16, 2025 Demo MP3Parser MP3 MP3全称为MPEG Audio Layer 3，它是一种高效的计算机音频编码方案，它以较大的压缩比将音频文件转换成较小的扩展名为.mp3的文件，基本保持源文件的音…...

编程日记 2025/6/29 12:23:25

Oracle--PL/SQL编程

前言：本博客仅作记录学习使用，部分图片出自网络，如有侵犯您的权益，请联系删除 PL/SQL（Procedural Language/SQL）是Oracle数据库中的一种过程化编程语言，构建于SQL之上，允许编写包含S…...

编程日记 2025/6/29 19:40:58

【愚公系列】《Python网络爬虫从入门到精通》063-项目实战电商数据侦探（主窗体的数据展示）

🌟【技术大咖愚公搬代码：全栈专家的成长之路，你关注的宝藏博主在这里！】🌟 📣开发者圈持续输出高质量干货的"愚公精神"践行者——全网百万开发者都在追更的顶级技术博主！ &#x1f…...

编程日记 2025/6/29 12:23:01

DAPP(去中心化应用程序)开发全解析:构建去中心化应用的流程

去中心化应用（DApp）凭借其透明性、抗审查性和用户数据主权，正重塑金融、游戏、社交等领域。本文基于2025年最新开发实践，系统梳理DApp从需求规划到部署运维的全流程，并融入经济模型设计、安全加固等核心要点&#xff0…...

编程日记 2025/6/29 11:23:28

Spark与Hadoop之间有什么样的对比和联系

一、什么是Spark Spark 是一个快速、通用且可扩展的大数据处理框架，最初由加州大学伯克利分校的AMPLab于2009年开发，并于2010年开源。它在2013年成为Apache软件基金会的顶级项目，是大数据领域的重要工具之一。 Spark 的优势在于其速度和灵活…...

编程日记 2025/6/29 12:15:05

相关文章：