vue引用本地静态资源（图片、音频、视频）

说明：本文章用于说明引用项目下本地资源（图片、音频、视频）的引用方式，从后台服务器获取的资源并不完全适用

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

<template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png" alt="vue引用本地静态资源（图片、音频、视频）">   </div> </template>

2、第二种引用方式：data中设置变量（要require路径），在<template>使用（特别说明：要使用:src，使用src会出错）

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

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

<template>   <div id="app">     <img :src="require('../../../images/tllogo.png')" alt="">      <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>