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>

アセットの下にある指定された画像をテンプレートに直接インポートします

• 图片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 からのインポートによる

• この欠点は、動的にインポートできないことと、名前をハードコーディングすることしかできないことです。
• 图片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>