vue3 + vite引入本地图片

学习链接

样式中引入图片

图片cover.png 在src/assets/imgs/cover.png（Main.vue在src/views/main/Main.vue）

<template>
    <div class="main">
        Main
    </div>
</template>

<script setup>

</script>

<style lang="scss">
    .main {
            
     
        width: 500px;
        height: 500px;
        background-image: url(../../assets/imgs/cover.png);
        // 也可以下面这样写
        // background-image: url(@/assets/imgs/cover.png);
    }
</style>

模板中直接引入assets下指定的图片

图片cover.png 在src/assets/imgs/cover.png（Main.vue在src/views/main/Main.vue）

<template>
    <div class="login">
    
        <div class="cover">
            <img src="@/assets/imgs/cover.png">
        </div>
        
        <div class="oper-box">
            <component :is="dynamicComponent"></component>
        </div>
        
    </div>
</template>

js通过import from

这种缺点就是不能动态导入，这个名字只能写死 图片cover.png 在src/assets/imgs/cover.png（Main.vue在src/views/main/Main.vue）

<template>
    <div class="main">
        Main
        <img :src="coverImg">
    </div>
</template>

<script setup>

import coverImg from @/assets/imgs/cover.png 
console.log(coverImg); // 打印的是： /src/assets/imgs/cover.png

</script>

<style lang="scss"></style>

使用Url + import.meta.url

这种可以动态导入（注意不能写@） 图片cover.png 在src/assets/imgs/cover.png（Main.vue在src/views/main/Main.vue）

<template>
    <div class="main">
        Main
        <img :src="getImg()" alt="">
    </div>
</template>

<script setup>
let imgName = cover.png
const getImg = () => {
            
     
    return new URL(`/src/assets/imgs/${ imgName}`, import.meta.url).href;
}
</script>

<style lang="scss">
    
</style>

使用import.meta.globEager导入指定文件夹中的所有图片

这种可以直接导入指定文件夹下的所有的图片，然后遍历出来

<template>
    <div class="main">
        Main
        <img v-for="k in Object.keys(modules)" :src="modules[k].default" :key="k" alt="">
    </div>
</template>

<script setup>

const modules = import.meta.globEager(/src/assets/imgs/*.png)
console.log(modules); //  打印：{/src/assets/imgs/cover.png: Module, /src/assets/imgs/cover2.png: Module}

</script>

<style lang="scss">
    
</style>