一:打包
assets:打包的时候,会被编译,被webpack打包进你的代码里
static:打包的时候不会比编译,只是被拷贝到了dist下面的static文件夹,直接引用
二:存放
assets:一般来说,放属于该项目的资源文件
static:里面放一些第三方库的文件
三、使用
(1)assets:
静态图片的使用:
<img class="keranimg" src="../../assets/img/keran.png" alt="">
动态图片的使用:必须使用require
<img v-for="item in dataImg" :src="item.img" :key="item.id">
data (){
return {
dataImg:[
{img: require('../assets/img1'), id: '1'},
{img: require('../assets/img2'), id: '2'},
{img: require('../assets/img3'), id: '3'},
{img: require('../assets/img4'), id: '4'}
]
}
(2)static:
静态图片的使用:
// 可以按照绝对路径来写
<img class="keranimg" src="../../static/img/keran.png" alt="">
// 也可以使用相对路径
<img class="keranimg" src="/static/img/keran.png" alt="">
动态图片的使用:
<div class="tubian" v-for="(itemtwo, indextwo) in item.arrtwo" :key="indextwo">
<img :src="'/static/img/' + itemtwo.img + '.png'" alt="">
</div>