vue 引入图片的使用方式

public
使用根路径，字符串和变量都行
其他文件夹
使用的是相对路径，字符串没问题
如果是变量必须用import引入图片

<template>
  <div class="my-header">
    <!-- public下面的图片直接写/根路径 -->
    <img src="/favicon.ico" alt="">
    <!-- public下的变量可以生效 -->
    <img :src="imgUrl1" alt="">

    <img src="../assets/logo.png" alt="">
    <!-- 此时的变量不生效 -->
    <img :src="imgUrl2" alt="">
    <!-- 用import引入才会生效 -->
    <img :src="imgUrl3" alt="">
    <span>Music</span>
  </div>
</template>

<script>
import imgUrl3 from '../assets/logo.png'
export default {
  name: 'myHeader',
  data () {
    return {
      imgUrl1: '/favicon.ico',
      imgUrl2: '../assets/logo.png',
      imgUrl3
    }
  }
}
</script>