微信小程序swiper轮播图不显示

Question

微信小程序swiper轮播图不显示
源文件
index.wxml文件：

<!-- 商品轮播图开始 -->
<view class="product_swiper">
  <swiper autoplay circular    indicator-dots>
      <swiper-item 
        wx:for="{{productObj.productSwiperImageList}}"
        wx:key="id"
      >
        <navigator>
          <image mode="widthFix" src="{{baseUrl+'/image/productSwiperImgs/'+item.image}}"></image>
        </navigator>
      </swiper-item>
    </swiper>
</view>
<!-- 商品轮播图结束 -->

index.js文件：

// 导入request请求工具类
import {
  getBaseUrl,
  requestUtil
} from '../../utils/requestUtil.js';

Page({

  /**
   * 页面的初始数据
   */
  data: {
    baseUrl: '',
    productObj:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const baseUrl = getBaseUrl();
    this.setData({
      baseUrl
    })
    this.getProductDetail(options.id)
  },

  /**
   * 获取商品详情
   */
  async getProductDetail(id) {
    const result = await requestUtil({
      url: '/product/detail',
      data:{id},
      method: "GET"
    });
    this.setData({
      productObj: result.message
    })
  },

如果wxml文件改成

<view class="product_swiper">
  <swiper autoplay circular    indicator-dots>
      <swiper-item >
          <image wx:if="{{baseUrl.length>0}}" mode="widthFix" src="{{baseUrl+'/image/productSwiperImgs/1.jpg'}}"></image>
      </swiper-item>
      <swiper-item >
          <image wx:if="{{baseUrl.length>0}}" mode="widthFix" src="{{baseUrl+'/image/productSwiperImgs/2.jpg'}}"></image>
      </swiper-item>
      <swiper-item >
          <image mode="widthFix" src="http://localhost:8000/image/productSwiperImgs/3.jpg"></image>
      </swiper-item>
    </swiper>
</view>

就有显示，麻烦指导一下

Answer 1

你的代码看起来没有问题，可能是图片路径的问题。请检查以下几点：

1. 确认图片路径是否正确，可以在浏览器中输入图片路径查看是否能够正常访问。

2. 确认图片是否存在，可以在服务器上查看图片是否存在。

3. 确认图片格式是否正确，只支持jpg、jpeg、png、bmp格式的图片。

如果以上都没有问题，可以在开发者工具中查看控制台输出，看是否有报错信息。