vue中静态资源的引用（本地资源，不是服务器端的）

当需要将本地静态资源传递给子组件时，不能直接将路径传给子组件，因为编译的时候会将它编译为字符串，导致找不到路径，但控制台还不会报错。这时候就需要使用以下第二种方式传递路径了。

1、第一种引用方式：直接在中引用，src中使用相对地址

<template>
  <div id="app">
    <img alt="" src="./assets/logo.png">
  </div>
</template>

2、第二种引用方式：data中设置变量（要require路径），在使用，或者传给子组件使用（要使用 :src，使用src会出错）

传给子组件使用：

  data() {
    return {
      orderList: [
        { icon: require("assets/img/profile/1.png"), info: "我的消息" },
        { icon: require("assets/img/profile/2.png"), info: "积分商城" },
        { icon: require("assets/img/profile/3.png"), info: "会员卡" },
      ],
      serviceList: [
        { icon: require("assets/img/profile/4.png"), info: "我的购物车" },
        { icon: require("assets/img/profile/5.png"), info: "下载购物APP" },
      ],
    };
  },

在使用：

<template>
  <div id="app">
    <img alt="" :src="logo">
  </div>
</template>
<script>
export default {
  name: 'Sidebar',
  data() {
    return {
      logo: require("../../../images/tllogo.png")
    }
  }
}
</script>

3、第三种引用方式：使用require拼接路径

<template>
  <div id="app">
    <img :src="require('../../../images/'+ this.imgName +'.jpg')" alt=""> 
    <img :src="img3" alt=""> 
  </div>
</template>
<script>
export default {
  name: 'SidebarLogo',
  data() {
    return {
      logo: require("../../../images/tllogo.png"),
      imgName:'03',
      img3:require('./assets/images/03.jpg'),
    }
  }
}
</script>