vue中引用图片

一、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中引用图片

  1. 正常来讲可以直接用
.test1 {
	background-image: url(../../../../assets/images/img.png)
}
.test2 {
	background-image: url(@/assets/images/img.png);
}
  1. 但是在scss方式中不可以直接用
<style scoped lang="scss">
$img: "../../assets/images/img.png";
.test {
	background-image: url('#{$img}');
}
上一篇:ASP.NET MVC 发布到IIS样式缺失问题


下一篇:unity入门—Assets目录特殊文件夹