vue中图片引入与使用几种方式

方法一：img 标签静态引入

朴实无华 <img src="../assets/img/logo.png" > 

方法二：background-image

朴实无华2.0版  background-image: url("../assets/img/bg.jpg");

方法三：require()方法
将编写代码时定义的路径转换为编译打包后的路径

<img :src='imgUrl' />
export default{
DATA(){
	return {
		imgUrl:require('@/assets/img1.png')
	}
}
}

方法四：import

  <el-image :src="logo" fit="cover"></el-image>
  //fit属性：确定图片如何适应到容器框（'fill', 'contain', 'cover', 'none', 'scale-down'）
</template>
<script>
import logo from "../assets/img/logo.png";
export default {
data() {
  return {
    logo,
  };
},
};
</script>