首页 > 其他分享 >vite vue-cli 读取文件原始内容 使用base64内容的文件

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

时间:2024-05-02 14:22:24浏览次数:27  
标签:文件 vue dataurl cli loader raw vite

新建文件 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'

标签:文件,vue,dataurl,cli,loader,raw,vite
From: https://www.cnblogs.com/7c89/p/18170154

相关文章

  • ESXI上安装和使用MegaCli
    一、下载安装包目前官网找不到安装包了,这里提供一个MegaCli-8.04.07:https://www.lanzoub.com/iUzBn1tyhdxi二、将安装包解压上传到esxi可以通过sftp或者其他工具上传到esxi中,不太建议在esxi上直接下载,我提供的是rar压缩包。这里我使用WinSCP工具上传到esxi中,下载地址:https://ww......
  • [springboot]配置文件加载顺序
    一般项目直接使用.jar文件以server.port配置举例;以jar包内和jar包外说明内部和外部配置文件顺序由高到底,如下:外部-启动时指定参数外部-环境变量外部config/yml文件外部yml文件内部config/yml文件内部yml文件启动时,如果指定了激活的profile文件,会优先找激活的profile文......
  • [POM]idea安装pom文件maven依赖查询插件
    安装前: 安装:Fle->Setting plugin->marketplace搜索“”mavenhelper“”,点击install 安装后,下方多了“DependencyAnalyzer”,支持查看全部依赖、依赖冲突,依赖树,过滤  ......
  • 华为平板(metapad 11.5 2023款)电脑传不了文件
    打电话前做了如下尝试1.版本号8下开开发者模式,去开发者模式开adb调试和usb模式调为MTP2.开启hdb(开启后ADB调试可能会关闭?建议最好再去看一眼)3.下载了华为手机助手(windows版本)接着搞不定打电话(950800)摇人让我做了以下尝试就好了1.换接口+换线(我无法确......
  • klog在日志文件中error级别日志重复打印2次
    问题现象packagemainimport( "flag" "gopkg.in/natefinch/lumberjack.v2" "k8s.io/klog/v2")funcmain(){ klog.InitFlags(nil) flag.Set("logtostderr","false") flag.Parse() l:=&lumberjack.Logger......
  • 19.3 ADG备库,数据文件SCN不更新(Bug: 29056767),导致备库异常重启后,需要重新apply很久
    故障现象:一套19.3ADG备库,备库安装完集群补丁重启后,发现需要重新apply很久以前的归档日志。分析过程:1、备库安装完补丁后,启动备库的日志恢复功能,在启动过程中报错,详细的日志如下所示。2024-04-16T18:34:40.895637+08:00BeginningStandbyCrashRecovery. Startedlogm......
  • vue-基础
    渲染的范围<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><p>狂神说Java</p><!--view层模板--><divid="app&quo......
  • Vue列表过滤
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>列表过滤</title><......
  • 如何批量删除多个不同路径的文件但又保留文件夹呢
     首先,需要用到的这个工具:度娘网盘提取码:qwu2蓝奏云提取码:2r1z1、我准备了三个文件夹(实际操作的时候可能是上百个文件夹,无所谓),里面都放了两个图片2、然后打开工具,使用文件批量复制的模块,勾选“复制时先清空…”的选项,注意,第一栏“要复制的文件和文件夹”里面为空,这样就想......
  • 如何批量复制多个文件到多个目录中(批量复制文件,多对多文件高效操作的方法)
    首先,需要用到的这个工具:度娘网盘提取码:qwu2蓝奏云提取码:2r1z现在开始说具体操作1、首先,我准备了3个文件夹和两个可爱的图片:当然,在实际使用的时候肯定不止这些,我这里只是演示一下下。2、然后打开这个工具,按下CTRL+5,切换到文件批量复制的功能模块。把两种图片选中后,拖到......