Vite静态资源处理——动态引入图片_vite 动态图片

单一资源处理

将资源引入为 URL

服务时引入一个静态资源会返回解析后的公共路径：

// 引用
import CaseBG from '@/assets/images/20230313144252.png'
1
2

导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可以使用相对路径。

// 使用
<img alt='' :src=CaseBG />
1
2

vite 生产构建后文件名会哈希，如图：

多个资源处理（动态）

new URL(url, import.meta.url)

import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL：

// 引用
const CaseBG = new URL('@/assets/images/20230313144252.png', import.meta.url).href
1
2

// 使用
<img alt='' :src=CaseBG />
1
2

如果想要动态引入图片资源，可以通过字符串模板封装一个方法：

/**
 * 动态引入图片资源
 * @param {String} name 图片名称/路径
 * @returns 图片url
 */
export const getImageUrl = (name) => {
  return new URL(`../assets/images/${name}`, import.meta.url).href
}
1
2
3
4
5
6
7
8

需要注意的是：

• 如果 name 想要传路径的话，比如图片资源在 images 下不同的文件夹中，即 home/20230313144252.png，那这个路径就需要传文件后缀。

<img
  alt=""
  :src="getImageUrl('home/20230314145534.png')"
  style="width: 214px; height: 46px;"
/>
1
2
3
4
5

写成这样的格式才能正确显示。

• 如果 name 只是传文件名的话，就可以把后缀直接写在封装的方法中：

export const getImage = (name) => (
  new URL(`../assets/images/${name}.png`, import.meta.url).href
)
1
2
3

<img
  alt=""
  :src="getImage('20230313094342')"
  style="width: 214px; height: 46px;"
/>
1
2
3
4
5

这样的话，就可以省略文件后缀了。

需要注意的是：

在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。然而，这个 URL 字符串必须是静态的，这样才好分析。否则代码将被原样保留、因而在 build.target 不支持 import.meta.url 时会导致运行时错误。

两个知识点：

new URL()

创建并返回一个 URL 对象，该 URL 对象引用使用绝对 URL 字符串，相对 URL 字符串和基本 URL 字符串指定的 URL。

import.meta

import.meta 是一个给 JavaScript 模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的 URL。

Public 目录

另外说一下一些特殊情况，可以解决路径问题。
如果有下列这些资源：

• 不会被源码引用（例如 robots.txt）
• 必须保持原有文件名（没有经过 hash）
• 等等一些压根不想引入该资源，只是想得到其 URL。

那么就可以将该资源放在指定的 public 目录中，它应位于项目根目录。该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。

目录默认是 <root>/public，但可以通过 publicDir 选项 来配置。

请注意：

• 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子，public/icon.png 应该在源码中被引用为 /icon.png。
• public 中的资源不应该被 JavaScript 文件引用。