vue-cli中图片的引入,一种在public中,一种在assets中

静态资源的引入

• <img src="@/assets/img/11.jpg" />
• <img src="../assets/img/11.jpg" />
• @开头,它会作为一个模板请求被解析; 它的用户在于Vue CLI默认会设置一个指向<projectRoot>/src的别名@;
• <img :src='src' />

data:function(){
	return {
		src:require('@/assets/img/11.jpg')
	}
}

• public文件夹下
  • <img src="/img/11.jpg" />
  • <img src="../../public/img/11.jpg" />

引入demo

<template>
	<ul>
		<!-- 
		     图片引入当道assets下面
			 @相当于全路径,
			 上面一个../是相对路径
		-->
		
		<li><img src="../assets/img/11.jpg"></li>		
		<li><img src="@/assets/img/11.jpg"></li>		
		<li><img :src="img_url"></li>
		<!-- 图片放到public下面 -->
		<li><img src="../../public/img/12.jpg"></li>	
		<li><img src="/img/12.jpg"></li>	
		<li><img :src="img_url_public"></li>	
	</ul>
</template>

<script>
	export default{
		data:function(){
			return {
				// 资源在assets里面赋值,注意require
				img_url:require('@/assets/img/11.jpg'),
				// 资源在public下面赋值
				img_url_public:'/img/12.jpg'
			}
		}
	}
</script>

<style>
</style>