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

特点

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>Documenttitle>
head>
<body>
    展示vite对静态图片的支持
    <br>
    
    <script type="module" src="./main.js" >script>
    
body>
html>

package.json

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

运行

运行命令

$ npm run dev

运行效果

Vite -静态资源处理 - 普通的图片_第1张图片

Vite -静态资源处理 - 普通的图片_第2张图片

你可能感兴趣的:(Vite,vite,静态图片处理,开箱即用)