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

折腾了好久,我终于找到了解决办法。

既然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,就把图片的路径动态映射出来。

注意传入的是字符串,我因为忘了是字符串,查错找了一阵子。

分类:
前端
标签: