uniapp开发微信小程序中关于navigator下image组件无法显示问题

林无静树898

已于 2022-12-26 21:51:16 修改

阅读量1.2k

点赞数

文章标签： uni-app 微信小程序 vue.js

于 2022-12-26 21:29:36 首次发布

本文链接：https://blog.csdn.net/weixin_60537353/article/details/128449683

版权

本人在用uniapp写微信小程序时出现了naivgator下面包裹image导致图片无法显示的问题，
百度了好久后发现可以把navigator写在外面图片可以正常显示，代码如下，希望对大家有所帮助

navigator标签直接写在swiper-item里面再写image标签的话会出现图片无法显示的问题

  <!-- 轮播图 -->
    <swiper class="swiper" circular :indicator-dots="true" autoplay duration="800" interval="3000"
      indicator-active-color="white">
     <swiper-item v-for="(item,i) in swiperList" :key="item.id">
       <navigator url="../../subpkg/goods_detail/goods_detail">
          <image :src="item.image_src"></image>
       </navigator>
     </swiper-item>
    </swiper>

解决方法:把navigator放在swiper-item外面，直接对navigator进行循环

   <!-- 轮播图 -->
    <swiper class="swiper" circular :indicator-dots="true" autoplay duration="800" interval="3000"
      indicator-active-color="white">
      <navigator v-for="(item,i) in swiperList" :key="item.id" :url="'../../subpkg/goods_detail/goods_detail?goods_id='+item.goods_id" >
        <swiper-item>
          <image :src="item.image_src"></image>
        </swiper-item>
      </navigator>
    </swiper>