vue3 + vite introduces local images

Study link

Vue2 introduces pictures

Several ways to introduce images into vite

Introducing images into styles

• 图片cover.pngLocated in src/assets/imgs/cover.png (Main.vue located in 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>

Directly introduce the image specified under assets into the template

• 图片cover.pngLocated in src/assets/imgs/cover.png (Main.vue located in 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 through import from

• This disadvantage is that it cannot be imported dynamically, and the name can only be hard-coded.
• 图片cover.pngLocated in src/assets/imgs/cover.png (Main.vue located in 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>

Use URL + import.meta.url

• This can be imported dynamically (note that you cannot write @)
• 图片cover.pngLocated in src/assets/imgs/cover.png (Main.vue located in 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>

Use import.meta.globEager to import all images in the specified folder

• This can directly import all the pictures in the specified folder and then traverse them.

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