vue2 图片用相对路径不显示<img src=“images/dp01.png“ alt=““/>

问题:npm run serve调试运行之后 图片不显示,

解决: 

第一种解决方案是:简单粗暴型 使用绝对路径也就是带上域名即可

是绝对路径不配置的话,显示会有问题,改成相对路径 

<img src="./images/dp01.png" alt=""/>

改了之后正常显示了。

 

 

第二种解决方案是:如果,src里用的是动态数据的话,可以使用require。 代码如下:

data () {
 return {
 img: require('../../images/pic.jpg') //加上require即可
   }
 }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
const activeIndex=Vue.ref(0); // console.log(activeIndex.valuea); function toggleActive(index){ if(activeIndex.value===index){ activeIndex.value=null; }else{ activeIndex.value=index; console.log(activeIndex); console.log(activeIndex.value); } const lis =document.querySelectorAll(".clearfix li") for(let i=0;i<lis.length; i++){ if(i!==index){ lis[i].classList.remove("noww"); } } }和<li v-for="(option,index) in conto" v-bind:key="index" :class="{'noww':activeIndex === index}" @click="toggleActive(index)" >{{option.category_title}} </li>和<div class="cont" v-show="activeIndex === 0" > <ul> <li v-for="option2 in cont" v-bind:key="option2" :class="parseInt(option2.stock) ===1?'olik':''" > <a :href="option2.source" target="_blank"> <div class="contimg" > <img :src="option2.bigpic" alt="{{option2.title}}"> </div> <div class="context"> <span> <img :src="option2.smallpic" alt="">{{option2.subtitle}}</span> <h4><span>{{option2.title}}</span></h4> <p>{{option2.summary}} </p> </div> </a> <!-- <div class="difficulty"> <div class="difficultbox"> <div class="modulus"> <div class="tit">难度系数</div> <div class="starsbox"> <div class="starsimg"><img src="../images/starsolik.png"></div> </div> </div> <div class="honor"> <div class="tts xuefen"><img src="../images/olikdegree.png"></div> <div class="tts certificate"><img src="../images/olikdegree2.png"></div> </div> </div> </div> --> </li> </ul> </div> <div class="cont" v-show="activeIndex.value === 1" > <ul> <li v-for="option2 in cont2" v-bind:key="option2" :class="parseInt(option2.stock) ===1?'olik':''" > <a :href="option2.source" target="_blank"> <div class="contimg" > <img :src="option2.bigpic" alt="{{option2.title}}"> </div> <div class="context"> <span> <img :src="option2.smallpic" alt="">{{option2.subtitle}}</span> <h4><span>{{option2.title}}</span></h4> <p>{{option2.summary}} </p> </div> </a> </li> </ul> </div>实现tab切换
07-15
要实现tab切换,你可以使用Vue的响应式数据和v-show指令。首先,你需要定义一个活动索引(activeIndex)的响应式变量,初始值为0。然后,你可以使用v-for指令循环渲染tab选项,并绑定点击事件。在点击事件中,你可以根据索引值切换活动索引的值,并根据活动索引的值来显示对应的内容。 下面是修改后的代码: ```html <template> <div> <ul> <li v-for="(option, index) in conto" :key="index" :class="{'noww': activeIndex === index}" @click="toggleActive(index)"> {{ option.category_title }} </li> </ul> <div class="cont" v-show="activeIndex === 0"> <ul> <li v-for="option2 in cont" :key="option2" :class="parseInt(option2.stock) === 1 ? 'olik' : ''"> <a :href="option2.source" target="_blank"> <div class="contimg"> <img :src="option2.bigpic" alt="{{option2.title}}"> </div> <div class="context"> <span> <img :src="option2.smallpic" alt="">{{option2.subtitle}} </span> <h4><span>{{option2.title}}</span></h4> <p>{{option2.summary}}</p> </div> </a> </li> </ul> </div> <div class="cont" v-show="activeIndex === 1"> <ul> <li v-for="option2 in cont2" :key="option2" :class="parseInt(option2.stock) === 1 ? 'olik' : ''"> <a :href="option2.source" target="_blank"> <div class="contimg"> <img :src="option2.bigpic" alt="{{option2.title}}"> </div> <div class="context"> <span> <img :src="option2.smallpic" alt="">{{option2.subtitle}} </span> <h4><span>{{option2.title}}</span></h4> <p>{{option2.summary}} </p> </div> </a> </li> </ul> </div> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const activeIndex = ref(0); function toggleActive(index) { if (activeIndex.value === index) { activeIndex.value = null; } else { activeIndex.value = index; } } return { activeIndex, toggleActive, }; }, }; </script> ``` 在上述代码中,使用了Vue的Composition API(setup函数)来定义activeIndex的响应式变量和toggleActive函数。activeIndex用于控制显示哪个内容,toggleActive用于切换活动索引的值。 请注意,你需要根据实际情况修改其他部分的代码,比如数据绑定和样式类名的逻辑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值