解决vite使用alias引入图片不显示的问题

参考： https://juejin.cn/post/7009441745301667853

方法一：配置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',
        },
    },
})
 
 

方法二：封装函数

//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="" />