assets static

一:打包

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>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值