第一种：
<template>
<div>
<h1>我是index 页面！</h1>
<img src="../assets/logo.png" alt="">
</div>
</template>
<script>
export default {
};
</script>
<style>
</style>
显示图：
还有一种类似的是通过 Go Live获取图片路径，来渲染页面。
但是这种的弊端可能会在线上环境无法展示
第二种：
<template>
<div>
<h1>我是index 页面！</h1>
<img src="../assets/logo.png" alt="">
<br>
<p>我是第二个logo图！</p>
<img :src="Img" alt="logo" title="我是一个logo图" />
</div>
</template>
<script>
import Img from "../assets/logo.png";
export default {
data: () => ({ Img }),
};
</script>
<style>
</style>
显示图：
img标签中title属性和alt属性区别：
当图片没有正常显示出来时，出现的仅仅是alt里面设置的内容。
当图片正常显示，当鼠标经过图片时，出现title里面的内容，对图片进行描述。
原文：https://www.cnblogs.com/sunqiaozhen/p/14628833.html