在 Vue 项目中引用 assets 文件夹中的几种方式

在 Vue 项目中引用 assets 文件夹中的图片可以通过以下几种方式：

一、在模板中引用

在.vue文件的模板部分，可以使用相对路径来引用图片。例如：

<template>
  <img src="@/assets/image.jpg" alt="描述图片的文本">
</template>

这里@是 Vue CLI 中配置的别名，指向src目录。所以@/assets/image.jpg就表示在src目录下的assets文件夹中的image.jpg图片。

二、在 CSS 中引用

在 CSS 文件中，可以使用相对路径来引用图片作为背景图像等。例如：

.class-name {
  background-image: url('~@/assets/image.jpg');
}

同样，这里的~@/assets/image.jpg表示引用src目录下assets文件夹中的图片。

三、在 JavaScript 中引用

在 Vue 组件的脚本部分，可以使用import语句来导入图片资源，然后在需要的地方使用。例如：

import image from '@/assets/image.jpg';

export default {
  data() {
    return {
      imgSrc: image,
    };
  },
};

然后在模板中可以使用v-bind绑定这个变量来显示图片：

<template>
  <img :src="imgSrc" alt="描述图片的文本">
</template>