vite vue-cli 读取文件原始内容 使用base64内容的文件

news/2024/10/14 6:24:43

新建文件 img.dataurl 中存放图片base64

<img class='img' :src='dataurl' alt='' />
import  dataurl from './img.dataurl'
data(){
return {
dataurl:dataurl
}
}
vue.config.js
module.exports=defineConfig({
configureWebpack:{module:{rules:[{test:/\.dataurl$/,loader:'raw-loader'}]}
}
})
npm i raw-loader -D

vue-cli

webpack

​ *.js js-loader

*.css css-loader

*.png file-loader

*.dataurl raw-loader

vite

<img class='img' :src='dataurl' alt='' />
import dataurl from './img.dataulr?raw'

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/26810.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

Seata AT模式学习

官方文档 Seata是目前国内最流行的一个分布式事务的组件,支持以下4种模式 AT模式:对业务代码无侵入,只要在业务的数据库加上一个UNDO_LOG表,在配置文件中配置好Seata的服务端,在需要开启全局事务的地方加上注解就行 TCC模式:即Try-Commit-Cancel,自定义prepare逻辑、com…

最好用的AI换脸软件,rope下载介绍(支持cpu)

随着AI技术的广泛运用,市面上的换脸软件也多了起来,今天给各位介绍其中的王者Rope! 先上两个动图,给大伙看看效果rope是如何实现这种自然的效果呢?这得益于机器学习技术的不断发展,rope经过深度神经网络的无数次迭代优化,最终得出的模型可以自动学习和识别视频中的人脸特…

提高学生学习成绩和自我效能感:护理培训的移动聊天机器人方法

(Promoting students learning achievement and self-efficacy: A mobile chatbot approach for nursing training) DOI: 10.1111/bjet.13158 一、摘要 研究目的:护理培训的目的不仅在于掌握技能,更在于培养解决问题的决策能力。然而,产科疫苗接种知识等培训项目大多采用以讲…

ESXI上安装和使用MegaCli

一、下载安装包 目前官网找不到安装包了,这里提供一个MegaCli-8.04.07:https://www.lanzoub.com/iUzBn1tyhdxi 二、将安装包解压上传到esxi 可以通过sftp或者其他工具上传到esxi中,不太建议在esxi上直接下载,我提供的是rar压缩包。这里我使用WinSCP工具上传到esxi中,下载地…

装备购买

解释一下蓝书上的做法 按照数学归纳法证明这个贪心,假设当前在第\(i\)行,前面已经选出\(i-1\)个线性无关的向量了(非零行),那么对于这一行,如果最终的结果不选\(z[k]\),而是选了另一个\(z[l]\),那么最终的向量组加入\(z[k]\)后就线性相关了,\(z[k]\)可以被这个向量组唯…

基于SSM的酒店管理系统毕业设计论文【范文】

摘要 随着旅游业的蓬勃发展及商务活动的频繁,酒店行业作为其重要组成部分,对信息化管理的需求日益迫切。本研究课题针对现代酒店业的管理需求,设计并实现了一个基于Spring、Spring MVC和MyBatis(SSM)框架的酒店管理系统。该系统旨在提高酒店业务处理效率,优化客房管理流程…

用Rolle中值定理证明Lagrange中值定理

\(命题人知不知道高中生有多喜欢这个公式,竟然敢放19题doge\)

SGDMA与普通DMA

DMA(Direct memory access,内存直接存取),属于 Vectored I/O 方式。 区别 Scatter-gather DMA 与 Block DMA(即普通DMA) 方式不同, Block DMA: 一次只传输一块物理上连续的数据,完成后中断,主机收到中断后再行下一块物理上连续的数据传输。 Scatter-gather DMA: 使用一…