Vite -静态资源处理 - 普通的图片

最新推荐文章于 2024-08-02 19:19:16 发布
最新推荐文章于 2024-08-02 19:19:16 发布
阅读量390 收藏
点赞数
分类专栏： Vite 文章标签： vite 静态图片处理 开箱即用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39505245/article/details/134466551
版权
本文详细介绍了如何在Vite项目中使用开箱即用的静态资源功能，包括图片的导入和基本操作，以及一个简单的项目结构实例。通过main.js和HTML代码展示了Vite对静态图片支持的过程。
摘要由CSDN通过智能技术生成

特点

Vite 对静态资源是开箱即用的。
无需做特殊的配置。

项目案例

项目结构

study-vite
  | -- src
  	| -- assets
  		| -- aaa.png      # 静态的图片资源
  | -- index.html         # 主页面
  | -- main.js            # 引入静态资源
  | -- package.json       # 脚本配置
  | -- vite.config.js     # vite 的配置文件，本案例中没有特殊的配置

代码

main.js （最主要的代码）

// 基本的图片操作

// 引入 图片 : 使用相对路径的方式
import aaaPicture from './src/assets/aaa.png'
// 打印看一下导入的是啥
console.log('aaaPicture : ',aaaPicture)
// js : 创建一个img 标签并插入到页面中
let aaaImg = document.createElement('img')
aaaImg.src = aaaPicture
document.body.append(aaaImg)

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    展示vite对静态图片的支持
    <br>
    <!--引入main.js  -->
    <script type="module" src="./main.js" ></script>
    
</body>
</html>

package.json

... 此处只展示 运行脚本的东西
  "scripts": {
    "dev": "vite",
  },

运行

运行命令

$ npm run dev

运行效果

在这里插入图片描述

在这里插入图片描述

NorthCastle
关注
专栏目录
Vue3 - vite 引入本地图片方法，页面引入本地静态资源图像详细教程，解决 UI 前端组件库的图片属性无法使用本地图像问题（无论是本地开发还是打包部署，本地图片的路径正常可用）
王佳斌
09-08 8679
vue3 vite引入使用本地图片，vue3 vite如何引入本地资源的图片图像，vite 怎么把本地的图片赋值给src图片标签属性，vue3 vite 使用require引入本地图像报错，vue3 vite组件库的组件怎么引入本地图片，vue3 vite 如何给组件库的图片属性链接本地资源的图像，element plus ant design vue 组件怎么使用本地资源的静态图片，vue3 vite版本 引入本地静态图片的方式，vue3 + vite引入本地图片，vue3如何加载本地图片等静态资源，引入
vite-vue-app:vite-vue-app
03-26
3. `public`目录：静态资源文件夹，通常存放HTML模板、图片、字体等非JavaScript资源。 4. `.eslintrc.js`/`.prettierrc.js`：ESLint和Prettier的配置文件，用于代码风格和格式的统一。 5. `.husky`目录：包含Git...
Vite -静态资源处理 - SVG格式的图片
northcastle的博客
11-17 376
vite 中直接使用svg 图片案例
vue3中vite 加载本地图片或动态加载图片
最新发布
qq_39016177的博客
08-02 490
vue3中vite 加载本地图片或动态加载图片
在用Vite开发时静态图片放哪里,才能保证显示，不出现找不到资源
Go_ahead_forever的博客
12-28 739
如果你想直接全部显示的那么请你把静态资源放到public目录下面，这样你一打包所有的静态资源都会放到打包根目录下。但是此时你在项目中引用的地址一定要是直接。根目录开始，这样就能识别了，不用从public目录开始，不然会识别不了。在用Vite开发时静态图片（资源）放哪里呢？
vue3 + vite 静态资源处理（图片引入）
weixin_45749030的博客
09-15 346
vue3 + vite 静态资源处理（图片引入）
二、Vite 静态资源文件处理（json、图片、svg、js等）
黄彪博客
07-06 1347
/ 如果是 scss 文件 或者 .module.css 文件，会编译 scss为css,然后转为 css module 对象。// 如果引入的是Vue文件，就会编译 Vue文件，有 render函数，调用render 会生成一个 Vue实例对象。// 如果引入的是Vue文件，就会编译 Vue文件，有 render函数，调用render 会生成一个 Vue实例对象。// 如果引入的是Vue文件，就会编译 Vue文件，有 render函数，调用render 会生成一个 Vue实例对象。
Vue项目在Webpack和Vite中使用静态资源图片
parade岁月的博客
06-03 967
vue单文件中静态资源的处理
手写vite插件 - 打包后资源自动上传oss
10-08
Vite允许用户通过插件系统扩展其功能，这些插件可以是用于处理静态资源、优化打包结果、提供源代码映射或实现其他特定需求的工具。手写Vite插件意味着开发者将自定义一个功能，使其与Vite的生命周期紧密结合，例如在...
vite-demo:VueJS与Vite
04-14
3. `public`目录：静态资源目录，如HTML、图片和字体文件。 4. `.eslintrc.js`或`.eslintrc.yaml`：Eslint的配置文件，用于代码风格检查和格式化。 5. `tsconfig.json`：TypeScript的配置文件，定义了编译选项和规则...
vite-sandbox
03-19
- `public`目录：放置静态资源，如图片、字体等，会被直接复制到构建输出目录。 - `index.html`：项目的入口文件，通常包含Vue的初始化代码。 - `vite.config.js`：Vite的配置文件，可以在这里定制项目构建的行为。 ...
vite-app-test
03-27
3. `public`：存放静态资源，如图片、字体等，会被直接复制到构建结果中。 4. `vite.config.js`：Vite的配置文件，可自定义Vite的行为。 **开发流程：** 1. 安装Vite：`npm install -g vite` 2. 初始化项目：`vite ...
vue3 vite版本 引入本地静态图片的方式
热门推荐
阿里巴啦的博客
01-28 2万+
vue3引入本地静态图片
vite动态导入图片
weixin_44368048的博客
09-30 3174
vite踩坑！无法使用require引入图片
解决VUE3 Vite打包后动态图片资源不显示问题
m0_56385144的博客
07-26 930
原因：Vite打包时不会打包以模板字符串包裹的图片相对路径，所以vite不知道此处要用哪个图片。方法一 将静态资源放到pbulic文件中。方法二 通过import 逐个导入图片资源。方法三 在函数中动态导入。
vite引入图片用法
notagoodwriter的博客
01-29 265
中 引入图片方式跟其他脚手架创建项目的引入方式不一样。是一个 ESM 的原生功能。
vite项目中处理各种静态资源的引入方式介绍
jieyucx的博客
06-27 6242
在vite创建的vue3项目中，引用图片资源有以下
Vite 打包时修改静态资源的路径
zhaojjjjjj163的博客
12-21 2849
在使用 Vite 打包项目时,如果想要修改静态资源的路径,可以在vite.config.js文件中配置base 选项。这个选项可以控制项目中静态资源的基路径。注意：如果应用是部署在非根路径上的服务器，需要确保服务器配置也能正确地处理这个基路径。配置后,Vite 在构建时会将所有静态资源的引用路径前添加/dist/ 前缀。
vue3+vite+ts 静态图片处理
07-05
Vue3、Vite 和 TypeScript 的组合通常用于构建高性能的现代Web应用。对于静态图片处理，你可以采用以下步骤： 1. **安装依赖**: - 使用`npm`或`yarn`安装`vue.config.js`文件，以便配置Vite支持TypeScript：`npm install @vitejs/plugin-vue@next typescript` - 如果需要处理图片，安装一个图片处理库，如`sharp`（Node.js的高性能图像处理库），但在客户端运行Vite时，可能不会直接引入，因为Vite默认会打包到浏览器。 2. **配置Vite**: - 在`.viteignore`文件中忽略`node_modules`，防止打包过多不必要的体积。 - 更新`vite.config.ts`，添加TypeScript支持，配置Vite插件： ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], build: { target: 'esnext', tsconfig: './tsconfig.build.json', // 根据项目需求配置正确的TS编译配置 }, }); ``` 3. **图片资源管理**: - 将图片放入`public`目录下，Vite会自动处理静态资产。 - 对于动态生成的图片（例如需要根据某些条件调整大小或添加水印），可以使用JavaScript (ES6+) 动态创建Image对象，或者在服务器端渲染时使用像`sharp`这样的库处理图片后再返回给前端。 4. **使用TypeScript**: - 引入图片处理模块时，确保正确导入并处理类型安全： ```typescript import sharp from 'sharp'; // 假设sharp是全局可用的，若不在Node环境则需引入库 async function resizeImage(src: string): Promise<Buffer> { const resized = await sharp(src) .resize(300, 200) // 设置新尺寸 .toBuffer(); // 转换为Buffer对象 return resized; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值