Vue3使用src动态引入本地图片的详细步骤

export const getAssetURL = (image) => {
  // 参数一: 相对路径
  // 参数二: 当前路径的URL
  return new URL(`../assets/img/${image}`, import.meta.url).href
}

<template>
    <div class="home">
        <img :src="getImageUrl()" alt="" />
    </div>
</template>
<script lang="ts">
export default {
    name: 'HomeIndex',
    setup() {
        const getImageUrl = () => {
            // 里面可以根据需求写逻辑
            return new URL('../assets/img/home/container_bg.png', import.meta.url).href;
        };

        return { getImageUrl };
    },
};
</script>

<template>
    <div
        class="container"
        :style="{
            background: 'url(' + getAssetsFile(true) + ') no-repeat',
            backgroundSize: '100% 100%',
        }"
    ></div>
</template>
<script lang="ts">
export default {
    name: 'HomeIndex',
    setup() {
        const getAssetsFile = (isAlarm: boolean) => {
            const url = isAlarm
                ? '../assets/img/monitor_alarm_bg.png'
                : '../assets/img/monitor_bg.png';
            return new URL(url, import.meta.url).href;
        };

        return { getAssetsFile };
    },
};
</script>
<style lang="scss">
.container {
    width: 300px;
    height: 100px;
}
</style>

<template>
    <div :class="['container', isAlarm ? 'monitor_alarm' : 'monitor_normal']"></div>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
    name: 'HomeIndex',
    setup() {
        const isAlarm = ref(true);
        const getAssetsFile = (isAlarm: boolean) => {
            const url = isAlarm
                ? '../assets/img/monitor_alarm_bg.png'
                : '../assets/img/monitor_bg.png';
            return new URL(url, import.meta.url).href;
        };

        return { getAssetsFile, isAlarm };
    },
};
</script>
<style lang="scss">
.container {
    width: 300px;
    height: 100px;
}
.monitor_normal {
    background: url(@/assets/img/monitor_bg.png) no-repeat;
    background-size: 100% 100%;
}

.monitor_alarm {
    background: url(@/assets/img/monitor_alarm_bg.png) no-repeat;
    background-size: 100% 100%;
}
</style>