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

特点

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

项目案例

项目结构

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

代码

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)

1
2
3
4
5
6
7
8
9
10
11

html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    展示vite对静态图片的支持
    <br>
    
    <script type="module" src="./main.js" >script>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

package.json

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

运行

运行命令

$ npm run dev
1

运行效果

在这里插入图片描述

相关阅读:
源代码审计（白盒测试）
prisma使用mongodb副本集群报错引发的一些列问题
【OpenCV-Python】教程：3-10 直方图（2）直方图均衡
STL教程5-STL基本概念及String和vector使用
Tomcat日志分割
常见三维建模软件有哪些？各自的特点是什么？
【问题记录】配置mongodb副本集实现数据流实时获取
SAP MM 事务代码VL04为STO创建外向交货单
纵横网络靶场部分wp
韩顺平java 515-520即时笔记

原文地址：https://blog.csdn.net/qq_39505245/article/details/134466551