说明：本文章用于说明引用项目下本地资源（图片、音频、视频）的引用方式，从后台服务器获取的资源并不完全适用
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>声明：本站所有文章，如无特殊说明或标注，均为网络收集发布。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
