0


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

单一资源处理

将资源引入为

URL

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

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

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

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

生产构建后文件名会哈希,如图:

img

多个资源处理(动态)

new URL(url, import.meta.url)

import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。将它与原生的 URL 构造器 组合使用,在一个

JavaScript

模块中,通过相对路径我们就能得到一个被完整解析的静态资源

URL

// 引用const CaseBG =newURL('@/assets/images/20230313144252.png',import.meta.url).href
// 使用
<img alt='' :src=CaseBG />

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

/**
 * 动态引入图片资源
 * @param {String} name 图片名称/路径
 * @returns 图片url
 */exportconstgetImageUrl=(name)=>{returnnewURL(`../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 只是传文件名的话,就可以把后缀直接写在封装的方法中:
exportconstgetImage=(name)=>(newURL(`../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 文件引用。

本文转载自: https://blog.csdn.net/qq_16525279/article/details/129587479
版权归原作者 z止于至善 所有, 如有侵权,请联系我们删除。

“Vite静态资源处理——动态引入图片”的评论:

还没有评论