本地图片的引用方式

第一种：

<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里面的内容，对图片进行描述。