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

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

单一资源处理

将资源引入为 URL

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

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

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

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

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
// 使用
<img alt='' :src=CaseBG />

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

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

需要注意的是:

  • 如果 name 想要传路径的话,比如图片资源在 images 下不同的文件夹中,即 home/20230313144252.png,那这个路径就需要传文件后缀。
<img
  alt=""
  :src="getImageUrl('home/20230314145534.png')"
  style="width: 214px; height: 46px;"
/>

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

  • 如果 name 只是传文件名的话,就可以把后缀直接写在封装的方法中:
export const getImage = (name) => (
  new URL(`../assets/images/${name}.png`, import.meta.url).href
)
<img
  alt=""
  :src="getImage('20230313094342')"
  style="width: 214px; height: 46px;"
/>

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

需要注意的是:

在生产构建时,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 文件引用。
转载请说明出处内容投诉
CSS教程_站长资源网 » Vite静态资源处理——动态引入图片

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买