在 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>

到此这篇关于在 Vue 项目中如何引用 assets 文件夹中的图片(方式汇总)的文章就介绍到这了,更多相关vue 引用 assets 文件夹中的图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！