在webpack工程，可以直接使用require引入图片，但是vite是无法直接使用require的，webpack能支持require是因为对它进行了处理。我们可以使用import，不过如果图片过多，对比require方式则略为繁琐和不便。
以下这种方式是常见的引入图片方式。但是如果图片多，就显得代码重复。且既代码也必须置于js开始处，无法传参，灵活性不够。
import tabBarIcon1 from '@/assets/images/icon/icon-calendar.svg'
import tabBarActiveIcon1 from '@/assets/images/icon/icon-calendar-active.svg'
import tabBarIcon2 from '@/assets/images/icon/icon-pending.svg'
import tabBarActiveIcon2 from '@/assets/images/icon/icon-pending-active.svg'
import tabBarIcon3 from '@/assets/images/icon/icon-column.svg'
import tabBarActiveIcon3 from '@/assets/images/icon/icon-column-active.svg'有没有更好的方案引入图片呢？不妨试试new URL()。使用方式可参考vite官方文档-静态资源处理。
下面介绍结合new URL()使用函数封装引入、样式背景引入。
项目架构
|-- public 静态资源文件夹，不经过vite处理
| |-- images 图片资源
| |-- icon 图标
| |-- icon-offline.svg 离线图标
|-- src 源代码
| |-- api 后端api存放目录
| |-- assets 静态资源目录，会被打包处理
| |-- images 图片资源
| |-- card-bg.svg 卡片背景图
| |-- components 组件目录
| |-- ... 其他
|-- package.json 项目依赖描述文件
|-- vite.config 项目配置文件
|-- ... 其他图片引入演示demo
<template>
<h1 align="center">图片引入演示</h1>
<!-- 公共方法获取public图片 -->
<img height="100" :src="getPublicAssetsFile('icon/icon-offline.svg')" alt="" srcset="" />
<!-- 公共方法获取图片 -->
<img height="100" :src="getAssetsFile('card-bg.svg')" alt="" srcset="" />
<!-- 背景图片 -->
<div class="icon-offline">icon-offline</div>
<div class="card-bg">card-bg</div>
</template>
<script setup lang="ts">
const PROJECT_DIR = '/mobile' // 这里需要根据项目配置修改,如部署在服务区根目录则不需要配置
/**
* 获取公共资源文件路径
* @param imgName 图片名称
* @returns 返回图片文件的URL路径
*/
function getPublicAssetsFile(imgName: string): string {
return new URL(PROJECT_DIR + '/images/' + imgName, import.meta.url).href
}
/**
* 获取资源文件路径
* @param imgName 图片名称
* @returns 资源文件路径
*/
function getAssetsFile(imgName: string): string {
return new URL('@/assets/images/' + imgName, import.meta.url).href
}
</script>
<style lang="less" scoped>
.icon-offline {
height: 100px;
background: url('/images/icon/icon-offline.svg');
}
.card-bg {
height: 100px;
background: url('@/assets/images/card-bg.svg');
}
</style>错误示例
<template>
<div class="card-bg">card-bg</div>
</template>
<style lang="less" scoped>
.card-bg {
height: 100px;
background: url('src/assets/images/card-bg.svg'); // 背景图片在开发运行时可以显示，打包后没有src目录，将无法显示
}
</style>
