vite中动态引入图片

1、utils/mixin.js

const modules = import.meta.glob('/src/assets/imgs/*/*', {eager: true})  

const mixins = {

  useStaticImgUrl: (imgPath) => {

    const path = `/src/assets/imgs/${imgPath}` // 这里不可以写路径别名,只可以写绝对或者相对路径

    return modules[path]?.default

  }

}

export default mixins;



2、main.js

import mixins from './utils/mixins'

app.config.globalProperties = {

  ...mixins

}

3、使用
 图片存放在/src/assets/imgs/home/test.png

    <img

      :class="{large: size == 'large', small: size == 'small'}"

      :src="useStaticImgUrl(home/test.png)"

      alt=""

    >

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容