折腾了好久,我终于找到了解决办法。
既然vite有alias,那我在想,是否可以设置alias的图片路径,这样我在引用图片的时候,就不用写那么长的路径了。结果是不行的,用常规设置组件alias的办法来设置图片的alias,会导致图片不显示。后来终于找到了解决办法。
方法一:配置alias
//app.vue
<img src="/images/logo.png" alt="" />
复制代码
//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
base: './',
plugins: [vue()],
resolve: {
alias: {
'/images': 'src/assets/images',
},
},
})
复制代码
图片的alias要用“/”开头,并且路径只能用字符串,不能用path.resolve
方法二:封装函数
如果不在vite.config.js里面使用alias的话,也可以封装一个函数来引用图片。
//utils.js
const getSrc = (name) => {
if (typeof name === 'undefined') return 'error.png'
const path = `/src/assets/images/${name}.png`
const modules = import.meta.globEager('/src/assets/images/*')
return modules[path]?.default
}
复制代码
//app.vue
<img :src="getSrc('about')" alt="" />
复制代码
import.meta.globEager('/src/assets/images/*')会动态获取到/src/assets/images下的所有图片(不包括子文件夹),并且把图片的路径作为key值变成一个modules。这时传入图片的文件名modules[path].default,就把图片的路径动态映射出来。
注意传入的是字符串,我因为忘了是字符串,查错找了一阵子。