Vite静态资源处理——动态引入图片
单一资源处理
将资源引入为 URL
服务时引入一个静态资源会返回解析后的公共路径:
// 引用 import CaseBG from '@/assets/images/20230313144252.png'
导入既可以使用绝对公共路径(基于开发期间的项目根路径),也可以使用相对路径。
// 使用
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
// 使用
如果想要动态引入图片资源,可以通过字符串模板封装一个方法:
/** * 动态引入图片资源 * @param {String} name 图片名称/路径 * @returns 图片url */ export const getImageUrl = (name) => { return new URL(`../assets/images/${name}`, import.meta.url).href }
需要注意的是:
- 如果 name 想要传路径的话,比如图片资源在 images 下不同的文件夹中,即 home/20230313144252.png,那这个路径就需要传文件后缀。
写成这样的格式才能正确显示。
- 如果 name 只是传文件名的话,就可以把后缀直接写在封装的方法中:
export const getImage = (name) => ( new URL(`../assets/images/${name}.png`, import.meta.url).href )
这样的话,就可以省略文件后缀了。
需要注意的是:
在生产构建时,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 目录中,它应位于项目根目录。该目录中的资源在开发时能直接通过 / 根路径访问到,并且打包时会被完整复制到目标目录的根目录下。
目录默认是 /public,但可以通过 publicDir 选项 来配置。
请注意:
- 引入 public 中的资源永远应该使用根绝对路径 —— 举个例子,public/icon.png 应该在源码中被引用为 /icon.png。
- public 中的资源不应该被 JavaScript 文件引用。
- 如果 name 只是传文件名的话,就可以把后缀直接写在封装的方法中:
还没有评论,来说两句吧...