webpack与vite读取base64图片

已于 2024-09-27 10:00:26 修改
阅读量1.3k 收藏 2
点赞数 3
分类专栏： 构建工具 文章标签： webpack 前端 node.js
于 2024-09-23 15:25:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/owo_ovo/article/details/142457951
版权

某些特殊场景下，需要使用base64渲染图片

data:image/jpeg;base64,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

直接通过img标签的src属性赋值会导致占用太多行，可以将base64字符串单独放到自定义后缀的文件下，使用时直接读取该文件。如创建文件 img.dataurl，并存入base64字符串

webpack

需要下载对应的loader，如css需要css-loader，此时要读取文件内容，需要使用 raw-loader

npm install raw-loader --save-dev

配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.dataurl$/, // 匹配 .dataurl 文件
        use: 'raw-loader',   // 使用 raw-loader
      },
      // 其他规则...
    ],
  },
};

使用

import img from "./img.dataurl"

<img src={img} alt="" />

vite

vite无需配置loader，导入时加上参数raw即可

import img from "./img.dataurl?raw"
前端构建变更：从 webpack 换 vite
wrc的专栏
02-01 2876
前端构建变更，从 webpack 换到 vite，加深对构建工具的理解
面试知识储备--打包工具篇（webpack和vite）
lc5801889的博客
10-22 1164
打包之后的代码我们很难看懂，不好调试，我们希望我们可以去调试打包之后的代码，以提高开发体验。SourceMap 会生成xx.map，里面包含源代码和构建后代码每一行的映射关系，浏览器在运行打包后的代码时，如果遇到报错，会去查找对应的 SourceMap 文件，然后把报错位置映射到源代码上，这样就便于我们进行调试了。浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。
前端项目性能优化:工程化环境中将图片转为base64（vite插件）
qq_45820271的博客
05-21 1652
本文介绍了通过在vite中自定义一个插件，在项目运行时将图片转为base64从而减少请求，提升项目性能的实现方式
子域名查询网站
热门推荐
beyondkim
06-28 4万+
子域名查询网站
QT 百度地图接入
Fenglin6165的专栏
03-13 1万+
参考资料： https://www.cnblogs.com/sigma0/p/7220334.html https://blog.csdn.net/caoshangpa/article/details/51015483 http://www.cnblogs.com/i-gps/archive/2012/06/09/2543332.html http://blog.sina.com.cn/s...
域名备案查询
mixboot
11-04 2万+
IP地址/域名信息备案管理系统
https的网站使用百度地图的问题
新成同学
02-22 1万+
https的网站使用百度地图，如果你引用的地址没写对的话，加载不出来百度地图，被认为是不安全的JS内容。 引用的地址：http://api.map.baidu.com/api?v=2.0&ak=qWmCfqDAdPBzy3YoHxGnimKT，后来看了一下，少了一个s=1字段，加一下s=1这个特殊字段后即可解决，格式：https://api.map.baidu.com/api?v=2.0&a
vue2.x 项目 webpack升级vite避坑总结
var_deng的博客
09-26 6534
前言 目前一个用webpack构建的vue2.X 项目由于业务扩展越来越大，导致项目在本地编译时热更新很慢，页面更新需要10几秒以上。为提高团体开发速度和效率，最近打算把底部打包构建的环境由webpack迁移为vite。 为什么 Vite 启动这么快 底层实现上， Vite 是基于 esbuild 预构建依赖的 esbuild 使用 go 编写，并且比以 js 编写的打包器预构建依赖, 快 10 - 100 倍。 因为 js 跟 go 相比实在是太慢了，js 的一般操作都是毫秒计，go 则是纳秒
前端构建工具大比拼：Vite、Webpack、Parcel、esbuild 等热门工具使用分析
mmc123125的博客
11-27 2906
Vite 是由尤大（尤雨溪）开发的一个新一代前端构建工具。Vite 的最大特点是利用原生的 ES Module（ESM）特性，在开发环境下实现按需加载和编译，从而显著提高开发速度。Vite 的目标是为开发者提供一个极速构建的体验，尤其在大型项目中，它能够减少构建时间，提升开发效率。Webpack 是目前最流行的前端打包工具，适用于多种资源类型（JavaScript、CSS、图片等）的打包。它通过模块化的方式组织和打包资源，能够帮助我们将开发过程中产生的模块化代码最终打包成浏览器可运行的文件。
【webpack】和【vite】中获取本地文件夹目录下的所有图片
stay hungry, stay foolish
03-11 1818
webpack 和 vite 中获取本地文件夹目录下的所有图片
【基础知识】11、github上传本地代码
呆呆的猫的博客
03-27 3044
第一步：下载git bash 下载链接 按步骤安装即可 第二步：配置git bash 一、输入ssh-keygen -t rsa -C "24428078@qq.com"获取钥匙 邮箱为github注册的邮箱（输入上述命令时注意空格） 出现下面界面，即为密钥创建成功 密钥在下面地址中： 打开id_rsa.pub 文件（可能需要安装专门打开的app） 密钥为...
Vite 静态资源处理
UserLiangjia的博客
09-11 2003
Vite 静态资源处理
vite中引入图片的几种方式
blue_121的博客
05-19 1万+
该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。请注意： 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：（相对路径一定要写正确，当前引入图片的文件，相对图片的位置）生产环境，开发环境统统无效。目录会更省事，不管是开发环境还是生产环境，可以始终以根目录保持图片路径的一致。
Qt动画框架：QVariantAnimation
友善啊，朋友的博客
09-01 2809
一、描述 这个类是动画框架的一部分。它用作属性动画的基类。 该类对 QVariants 执行插值。 如果不想将 QVariant 声明为 Qt 属性，则子类化 QVariantAnimation 可以是一种替代方法。但是请注意，在大多数情况下，最好将 QVariant 声明为属性。 并非所有 QVariant 类型都受支持。以下是当前支持的 QVariant 类型列表： int uint double float QLine QLineF QPoint QPointF QSize
QSortFilterProxyModel实现筛选与排序&固定行号（垂直表头序号）
luo_bin2010的专栏
06-15 2260
QTableview，QSortFilterProxyModel，QAbstractTableModel，实现排序、筛选、固定行号的功能。
LinkIQ线缆网络测试仪基于单项测试方法
szlxd123的博客
04-22 1182
根据电缆另一端的情况，自动提供相应的测量数据。对于开放电缆，仪器显示长度和对;如果远程使用单位提供的仪器,试验结果表明,所支持的最大数据速率电缆是10%,如果电缆连接到交换机端口,LinkIQ将显示名称、端口号、速率和双工模式的切换;如果被告知支持Poe，仪器将显示电平和功率(高达90w或8级)，然后加载开关以验证可用的功率。 LinkIQ使用Fluke NetWork（福禄克网络）的LinkWare PC报告软件，该软件支持各种测试，可以追溯到20年前。它实际上是业界的标准报告解决方案，拥有成千上万的活
【QT】QApplication简介
dujuancao11的博客
04-01 2932
1、QApplication QApplication类管理GUI程序的控制流和主要设置，是基于QWidget的，为此特化了QGuiApplication的一些功能，处理QWidget特有的初始化和结束收尾工作。 对于使用了Qt的任何GUI程序来说，不管何时何地有多少个Window，但只有一个QApplication对象，如果不是基于QWidget的程序，相应的则使用QGuiApplicatio...
QVariant的使用
zw_ggr_2017的博客
05-23 1635
QVariant，万能类型，Qt，C++
QMT量化超时撤单
路在何方
04-13 2326
超时撤单包含买入超时撤单和卖出超时撤单，撤单后调整价格重新买入或卖出未完成的数量。
vue3 vite 使用本地静态图片打包线上报错
最新发布
04-01
### Vue3 + Vite 项目打包后静态图片路径问题解决方案 在 Vue3 和 Vite 的项目中，如果遇到本地开发环境中能够正常加载静态图片，但在打包部署到线上环境后无法显示的情况，通常是因为静态资源路径配置不当或者构建工具未能正确处理相对路径和绝对路径的关系。 #### 1. **问题根源** Vite 使用 `import` 或者通过 `new URL()` 来导入静态资源时，会将其转换为模块 ID 并生成最终的文件名[^1]。然而，在某些情况下，动态路径拼接可能会导致未定义 (`undefined`) 被注入到路径中，从而引发错误。 --- #### 2. **解决方案** ##### 方法一：使用 `import` 导入静态资源 对于静态图片，推荐直接通过 ES Module 的方式导入图片并绑定到模板中： ```javascript // 在组件中直接 import 图片 import imgSrc from '@/assets/images/example.png'; export default { data() { return { imageSource: imgSrc, }; }, }; ``` 这种方式会在构建过程中自动生成正确的路径[^2]。 --- ##### 方法二：利用 `new URL()` 动态获取路径 当需要动态设置图片路径时，可以借助 JavaScript 的 `URL` 对象来确保路径正确无误： ```javascript const imagePath = new URL('@/assets/images/example.png', import.meta.url).href; export default { data() { return { imageSource: imagePath, }; }, }; ``` 此方法同样能有效避免路径中的 `undefined` 错误。 --- ##### 方法三：调整 Vite 配置以优化静态资源管理 如果上述两种方法仍无法解决问题，则需检查项目的 `vite.config.js` 文件，确认是否已合理配置静态资源的基础路径（base）。例如： ```javascript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], base: './', // 设置基础路径，默认为 '/' }); ``` 注意： - 如果将应用托管在一个子目录下而非根域名，应将 `base` 修改为目标子目录名称，比如 `/subdir/`。 - 此外，还可以启用资产内联选项或将小型图片转为 Base64 编码以减少外部依赖[^3]。 --- ##### 方法四：排查 HTML 中的硬编码路径 有时开发者可能直接写死了部分 HTML 属性内的图片地址，而这些地址并未经过 Webpack/Vite 构建流程改造。因此建议统一采用模板语法渲染所有视图层内容，而不是手动指定字符串形式的 URI。 --- #### 3. **注意事项** 为了防止未来再次发生类似情况，请遵循以下最佳实践： - 尽量避免混合使用相对路径与绝对路径； - 统一维护一份全局常量表用于存储公共资源前缀； - 定期测试不同浏览器下的兼容表现以及生产模式的表现差异。 --- ### 示例代码片段 以下是完整的实现案例供参考： ```vue <template> <img :src="imageSource" alt="Example Image"> </template> <script> import imgSrc from '@/assets/images/example.png'; // 方式一 const dynamicPath = new URL('@/assets/images/dynamic-example.png', import.meta.url).href; // 方式二 export default { data() { return { imageSource: imgSrc, // 可替换为 dynamicPath 测试效果 }; }, }; </script> ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

田本初

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值