vue3如何使用本地图片

Question

vue3.2使用本地图片显示不出来为什么
我就想用css传个图片当成背景图片把本地图片传入本地的时候用bgi引入为什么在页面显示不出来

Answer 1

该回答引用gpt
在Vue3中，可以使用相对路径来引入本地图片。在你的代码中，使用了@符号作为别名，这通常是在vue-cli创建的项目中使用的别名，对应的路径为src目录。

因此，你可以使用如下路径来引入本地图片：

<template>
    <div class="group">图片</div>
</template>
<script setup>
import { ref } from 'vue'
</script>
<style scoped>
.group {
    background-image: url('../assets/Group 144.jpg');
    width: 500px;
    height: 500px;
}
</style>

注意，路径中的空格需要使用%20代替，如../assets/Group%20144.jpg。如果你的路径中包含其他特殊字符，也需要进行相应的转义。