vite中动态引入图片

2024-10-17  本文已影响0人  sunowter

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=""

    >

上一篇 下一篇

猜你喜欢

热点阅读