vue3 + vite引入本地图片

学习链接

vue2引入图片

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>