美文网首页
vite中动态引入图片

vite中动态引入图片

作者: sunowter | 来源:发表于2024-10-17 16:37 被阅读0次

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

    >

相关文章

网友评论

      本文标题:vite中动态引入图片

      本文链接:https://www.haomeiwen.com/subject/ipnfdjtx.html