为什么我的图片显示不出来
<template>
<div class="Div">
<div>
<ul>
<li v-for="item in list">
<div class="divc"><img :src="item.img" alt=""></div>
{{item.title}}
<div class="adiv">
<img :src="item.srci? '../../assets/喜欢.png':'../../assets/喜欢2.png'" @click="item.srci=!item.srci">
</div>
<div class="divh"></div>
</li>
</ul>
</div>
<daohang></daohang>
</div>
</template>
<script>
export default{
data(){
return{
//srci:'1'
list:[
{srci:true,img:'../../assets/1.jpg',title:'我的能量很少的,心也小小的'},
{srci:true,img:'../../assets/2.jpg',title:'地球到星星没有捷径'},
{srci:true,img:'../../assets/3.jpg',title:'没有一种爱不需要培养'},
{srci:true,img:'../../assets/4.jpg',title:'有件事似乎已被我遗忘很久了'},
{srci:true,img:'../../assets/5.jpg',title:'都是捕风,都是虚空'},
]
}
},
然后直接在img里加src="路径",图片又能显示出来
<ul>
<li><div class="divc"><img src="../../assets/1.jpg" alt=""></div>我的能量很少的,心也小小的<div class="adiv">
<img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
<li><div class="divh"></div></li>
<li><div class="divc"><img src="../../assets/2.jpg" alt=""></div>地球到星星没有捷径<div class="adiv">
<img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
<li><div class="divh"></div></li>
<li><div class="divc"><img src="../../assets/3.jpg" alt=""></div>没有一种爱不需要培养<div class="adiv">
<img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
<li><div class="divh"></div></li>
<li><div class="divc"><img src="../../assets/4.jpg" alt=""></div>有件事似乎已被我遗忘很久了<div class="adiv">
<img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
<li><div class="divh"></div></li>
<li class="divc2"><div class="divc"><img src="../../assets/5.jpg" alt=""></div>都是捕风,都是虚空<div class="adiv">
<img src="../../assets/喜欢.png" alt="" name="btn" @click="onClick" v-if="srci==='1'"><img src="../../assets/喜欢2.png" @click="onClick" v-if="srci==='2'"></div></li>
</ul>
怎么改啊。为啥F12那里的src不一样。。
楼主,你好!
1,图片能正常显示是因为经过
webpack
处理了,从截图里也可以看出来(src
引用的资源变成了base64
的)。这是因为vue-loader
做了处理。可以参考官方文档,传送门。2,图片不正常显示肯定是因为路径的问题,定义在
data
里也是可以的,但是要用require
关键字,这样就可以经过webpack
处理,效果是一样的。如有帮助,麻烦点击下采纳,谢谢~