在webpack工程，可以直接使用require引入图片，但是vite是无法直接使用require的，webpack能支持require是因为对它进行了处理。我们可以使用import，不过如果图片过多，对比require方式则略为繁琐和不便。
如下这种方式既不能支持变量，代码也必须置于js开始处。
import tabBarIcon1 from '~/images/icon/icon-calendar.svg'
import tabBarActiveIcon1 from '~/images/icon/icon-calendar-active.svg'
import tabBarIcon2 from '~/images/icon/icon-pending.svg'
import tabBarActiveIcon2 from '~/images/icon/icon-pending-active.svg'
import tabBarIcon3 from '~/images/icon/icon-column.svg'
import tabBarActiveIcon3 from '~/images/icon/icon-column-active.svg'有没有更好的方案引入图片呢？不妨试试new URL()。使用方式可参考vite官方文档-静态资源处理。
下面演示img标签src引入以及背景方式引入。为了使用更方便，建议封装成公共函数，统一调用。
注意：需要把图片资源放在public目录管理。否则会出现本地开发能显示图片，打包后因为路径处理问题无法显示图片。
|-- public 静态资源文件夹，不经过vite处理
| |-- images 图片资源
|-- src 源代码
| |-- api 后端api存放目录
| |-- ... 其他
|-- package.json 项目依赖描述文件
|-- vite.config 项目配置文件
|-- ... 其他<template>
<h1 align="center">图片引入演示</h1>
<!-- 正确姿势 -->
<img height="100" :src="requireImg('icon/icon-offline.svg')" alt="" srcset="">
<!-- 图片无法正常显示，路径不对 -->
<img height="100" :src="requireImg2('icon/icon-offline.svg')" alt="" srcset="">
<!-- 正确姿势 -->
<div class="test-bg">test-bg1</div>
<!-- 图片无法正常显示，路径不对 -->
<div style="height: 100px;background: url('/images/icon/icon-offline.svg')">test-bg2</div>
</template>
<script setup lang="ts">
const PROJECT_DIR = '/acsmobile'
/**
* 获取图片
* @param imgUrl
* @returns
*/
function requireImg(imgUrl: string) {
return new URL(PROJECT_DIR + '/images/' + imgUrl, import.meta.url).href
}
function requireImg2(imgUrl: string) {
return new URL('/images/' + imgUrl, import.meta.url).href
}
</script>
<style lang="less" scoped> .test-bg {
height: 100px;
background: url('/images/icon/icon-offline.svg')
}
</style>请注意两点：
1、如果打包后的源码不是直接部署在根服务器下，而是在某个目录下，则应该加上部署目录，部署目录可以通过常量定义，也可以通过匹配location.pathname的方式获取；
2、行内样式引入背景图片不能直接通过 / 根路径访问到 而通过class引入则可以。
最后，因为public目录的资源是不会被打包的，因此图片不会携带hash值，所以如果更换了图片，那么图片路径加上随机参数，即可解决旧图片缓存问题。