在 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");

来源：https://blog.csdn.net/china_coding/article/details/127156532