526互联

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

发布时间 2023-03-28 12:00:38作者: Felix_Openmind

参考： 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="" />