vue引用本地静态资源(图片、音频、视频)

2022年6月9日10:37:29

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

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>
  • 作者:只如初见0706
  • 原文链接:https://blog.csdn.net/zrcj0706/article/details/104613545
    更新时间:2022年6月9日10:37:29 ,共 783 字。