在 Element UI 中，图片组件是 el-image。该组件重要的属性是 src，src 绑定了一个 url 变量

在 Element UI 中，图片组件是 el-image。该组件重要的属性是 src，src 绑定了一个 url 变量

在 vue 项目中，常用的引入图片的方式有 4 种：

1.import

<template>
<div>
  <el-image :src="logo" fit="cover"></el-image>
</div>
</template>
<script>
import logo from "../assets/img/logo.png";
export default {
data() {
  return {
    logo,
  };
},
};
</script>

2.require

<template>
  <div>
    <el-image :src="logo_url" fit="cover"></el-image>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      logo_url: require("@/assets/img/logo.png"),
    };
  },
};
</script>

3.img 标签静态引入

<img src="../assets/img/logo.png" >

4.background-image 样式静态引入

background-image: url("../assets/img/bg.jpg");

除了可以用./表示相同文件夹下的绝对路径，我们还可以使用@符号表示绝对路径，例如：

logo_url:require("@/assets/img/logo.png")