vue引入图片的方式

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