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

Posted 2023-03-28 Felix_Openmind

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

方法一：配置alias

//app.vue

<img src="/images/logo.png"  />


//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\')"  />

学而不思则罔，思而不学则殆！