首页 > 其他分享 >解决vite使用alias引入图片不显示的问题

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

时间:2023-03-28 12:01:26浏览次数:52  
标签:vue const images alias 引入 import vite

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


标签:vue,const,images,alias,引入,import,vite
From: https://www.cnblogs.com/openmind-ink/p/17264626.html

相关文章