一、template中引用图片
1. 直接用
<template>
<img src="@/assets/images/img.png">
<img src="../../../assets/images//img.png">
<template/>
2. import引入
<template>
<img :src="imgUrl">
<template/>
<script>
import imgUrl from '@/assets/images/img.png'
export default {
data () {
return {
imgUrl: imgUrl
}
}
}
</script>
二、script中引用图片
同上 一、2import引入
三、style中引用图片
- 正常来讲可以直接用
.test1 {
background-image: url(../../../../assets/images/img.png)
}
.test2 {
background-image: url(@/assets/images/img.png);
}
- 但是在scss方式中不可以直接用
<style scoped lang="scss">
$img: "../../assets/images/img.png";
.test {
background-image: url('#{$img}');
}