在 vue 项目中，常用的4 种引入图片的方式
warning:
这篇文章距离上次修改已过199天，其中的内容可能已经有所变动。
在 Vue 项目中，引入图片主要有以下四种方式：
- 在模板中使用
require方法：
<template>
<img :src="require('@/assets/image.png')" alt="image">
</template>- 在模板中通过
import导入：
<template>
<img :src="image" alt="image">
</template>
<script>
import image from '@/assets/image.png';
export default {
data() {
return {
image: image
};
}
}
</script>- 在样式中使用 CSS 导入：
<style>
.my-class {
background-image: url('~@/assets/image.png');
}
</style>- 直接在模板中使用绝对路径或相对路径：
<template>
<img src="@/assets/image.png" alt="image">
</template>请根据实际情况选择合适的方式引入图片。通常情况下，第一种和第四种方式用得较多。
评论已关闭