在 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>
原文地址：https://blog.csdn.net/chu396815830/article/details/142453217
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！