一、背景图片路径设置方法

1. 通过模板语法引入

示例代码：

<template>
  <div>
    <img :src="require('@/assets/logo.png')" alt="Logo">
  </div>
</template>

注意事项：

  • 确保路径是相对于项目根目录的，且图片文件存在于项目中。

2. 通过CSS背景图引入

示例代码：

<template>
  <div class="background-image"></div>
</template>

<style scoped>
.background-image {
  width: 100px;
  height: 100px;
  background-image: url('@/assets/background.png');
  background-size: cover;
}
</style>

注意事项：

  • 使用url()函数引入图片路径。
  • 可以通过background-size属性设置背景图片的大小，例如cover或contain。

3. 通过JavaScript引入

示例代码：

<template>
  <div class="background-image" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></div>
</template>

<script>
export default {
  data() {
    return {
      backgroundImage: require('@/assets/background.png')
    };
  }
};
</script>

<style scoped>
.background-image {
  width: 100px;
  height: 100px;
}
</style>

注意事项：

  • 使用require()函数引入图片路径。
  • 可以通过:style属性动态设置背景图片。

二、总结