微信小程序中如何正确显示图片

无法正确显示图片

img


以下为首页中的wxml页面

<!--index.wxml-->
<view class="container">
  <view class="aside">
    <view class="{{tabIndex === index ? 'menu active' : 'menu'}}" wx:for="{{menus}}" wx:key="{{item.id}}" data-index="{{index}}" bindtap='tabMenu'>{{item.menu}}
    </view>
  </view>
  
  <view class="item-content">
    <view class="{{orderCount.num === 0 ? 'box' : 'box active'}}">
      <view class="item" wx:for="{{items}}" wx:key="{{item.id}}" >
        <view wx:for="{{item.images}}" wx:key="{{index}}">
          <!-- <image src="{{imageUrl}}" mode="aspectFit"></image> -->
          <image src="/images/1.png"></image>
        </view>
        <text class="title">{{item.title}}</text>
        <text class="price">￥ {{item.price}} 元</text>
        <text class="{{item.active ? 'btn active' : 'btn'}}" bindtap='addOrder' data-id="{{item.id}}" data-index="{{index}}">添加</text>
      </view>
    </view>
  </view>
  <view class="{{bottomFlag ? 'bottom-bar' : 'bottom-bar hidden'}}">
    <view class="count">
        共 <text class="num">{{orderCount.num}} 件</text>     
        合计 <text class="num">{{orderCount.money}} 元</text> 
    </view>
    <view class="btn">
        <text bindtap='card'>购物车</text>
    </view> 
  </view>
</view>
JS文件
//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    tabIndex: 0,
    // 统计商品数量和价格
    orderCount: {
      num: 0,
      money: 0
    },
    bottomFlag: false,
    // 提交的订单
    orders: true,
    menus: [{
      id: 1,
      menu: '时令水果'
    }, {
      id: 2,
      menu: '休闲食品'
    }, {
      id: 3,
      menu: '文体玩具'
    }, {
      id: 4,
      menu: '纸品清洁'
    }, {
      id: 5,
      menu: '酒水饮品'
    }, {
      id: 6,
      menu: '乳品烘焙'
    }, {
      id: 7,
      menu: '加热即食'
    },{
      id:8,
      menu:'特价推荐'
    }
  ],
  
    // 商品列表
    items: [{
      id: 1,
      title: '湖南辣椒小炒肉1',
      price: 8,
      active: false,
      num: 1,
      imageUrl: '/images/1.png'
}, {
      id: 2,
      title: '湖南辣椒小炒肉2',
      price: 13,
      active: false,
      num: 1,
      image: '/path/to/2.png'
    }, {
      id: 3,
      title: '湖南辣椒小炒肉3',
      price: 14,
      active: false,
      num: 1,
      image: '/path/to/3.png'
    }, {
      id: 4,
      title: '湖南辣椒小炒肉4',
      price: 15,
      active: false,
      num: 1,
      image: '/path/to/4.png'
    }, {
      id: 5,
      title: '湖南辣椒小炒肉5',
      price: 16,
      active: false,
      num: 1,
      image: '/path/to/5.png'
    }, {
      id: 6,
      title: '湖南辣椒小炒肉5',
      price: 17,
      active: false,
      num: 1,
      image: '/path/to/6.png'
    }, {
      id: 7,
      title: '湖南辣椒小炒肉5',
      price: 18,
      active: false,
      num: 1,
      image: '/path/to/7.png'
    },
    {
      id: 8,
      title: '湖南辣椒小炒肉5',
      price: 18,
      active: false,
      num: 1,
      image: '/path/to/8.png'
    },
    {
      id: 9,
      title: '湖南辣椒小炒肉5',
      price: 18,
      active: false,
      num: 1,
      image: '/path/to/9.png'
    },
    {
      id: 10,
      title: '湖南辣椒小炒肉5',
      price: 18,
      active: false,
      num: 1,
      image: '/path/to/10.png'
    },
    {
      id: 11,
      title: '湖南辣椒小炒肉5',
      price: 18,
      active: false,
      num: 1,
      image: '/path/to/11.png'
    },
    {
      id: 12,
      title: '湖南辣椒小炒肉5',
      price: 18,
      active: false,
      num: 1,
      image: '/path/to/12.png'
    },
    {
      id: 13,
      title: '湖南辣椒小炒肉5',
      price: 18,
      active: false,
      num: 1,
      image: '/path/to/13.png'
    },
    {
      id: 14,
      title: '湖南辣椒小炒肉5',
      price: 18,
      active: false,
      num: 1,
      image: '/path/to/14.png'
    },
    {
      id: 15,
      title: '湖南辣椒小炒肉5',
      price: 18,
      active: false,
      num: 1,
      image: '/path/to/15.png'
    },
    {
      id: 16,
      title: '湖南辣椒小炒肉5',
      price: 18,
      active: false,
      num: 1,
      image: '/path/to/16.png'
    },
    {
      id: 17,
      title: '湖南辣椒小炒肉5',
      price: 18,
      active: false,
      num: 1,
      image: '/path/to/17.png'
    },
    {
      id: 18,
      title: '湖南辣椒小炒肉5',
      price: 18,
      active: false,
      num: 1,
      image: '/path/to/18.png'
    }
  ]
  },
  // 下拉刷新
  onPullDownRefresh: function () {
    setTimeout(()=>{
      wx.showToast({
        title: '成功加载数据',
        icon: 'success',
        duration: 500
      });
      wx.stopPullDownRefresh()
    }, 500);
  },
  tabMenu: function(event) {
    let index = event.target.dataset.index;
    this.setData({
      tabIndex: index
    });
  },
  // 点击去购物车结账
  card: function() {
    let that = this;
    // 判断是否有选中商品
    if (that.data.orderCount.num !== 0) {
      // 跳转到购物车订单也
      wx.redirectTo({
        url: '../order/order'
      });
    } else {
      wx.showToast({
        title: '您未选中任何商品',
        icon: 'none',
        duration: 2000
      })
    }
  },
  addOrder: function(event) {
        let that = this;
        let id = event.target.dataset.id;
        let index = event.target.dataset.index;
        let param = this.data.items[index];
        let subOrders = []; // 购物单列表存储数据
        param.active ? param.active = false : param.active = true;
        // 改变添加按钮的状态
        this.data.items.splice(index, 1, param);
        that.setData({
          items: this.data.items
        });
        // 将已经确定的菜单添加到购物单列表
        this.data.items.forEach(item => {
          if (item.active) {
            subOrders.push(item);
          }
        });
        // 判断底部提交菜单显示隐藏
        if (subOrders.length == 0) {
          that.setData({
            bottomFlag: false
          });
        } else {
          that.setData({
            bottomFlag: true
          });
        }
        let money = 0;
        let num = subOrders.length;
        subOrders.forEach(item => {
          money += item.price; // 总价格求和
        });
        let orderCount = {
          num,
          money
        }
        // 设置显示对应的总数和全部价钱
        this.setData({
          orderCount
        });
        // 将选中的商品存储在本地
        wx.setStorage({
          key: "orders",
          data: subOrders
        });
      },
      onLoad: function() {
    
      }
})

items数组项里面没images数组啊，干嘛要在遍历一次？改下面这样

      <view class="item" wx:for="{{items}}" wx:key="{{item.id}}" >
          <image src="{{item.image}}" mode="aspectFit"></image>
          <text class="title">{{item.title}}</text>
.....
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

【相关推荐】



  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7530122
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：微信小程序———获取用户信息 以及如何展示到wxml
  • 您还可以看一下 邱石老师的小程序开发入门课程中的 7-2加法计算器wxml页面的实现小节, 巩固相关知识点
  • 除此之外, 这篇博客: 微信小程序，通过点击按钮实现在本页面上跳转到一个新页面中的 一、wxml文件  部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

     

    <!-- 半透明层 -->

    <view hidden="{{isHiddens}}" class="hiddenView" style="height:{{windowHeight}}px;">

    <!-- 内容 -->

    <view class="textView" style="height:{{windowHeight*110/340}}px;">

    <view>许愿墙最初是承载愿望的实体，一种建筑，人们在上面涂涂画画或贴上小纸片，写上自己的愿望、期盼、祝福等；也用在网络上，一般是网站独立的一个空间页面，供人们展示许愿、祈祷、祝福等。</view>

    <image mode="widthFix" class="textImg" src="../../imgs/Explain.png"></image>

    </view>

    <!-- 取消 -->

    <view class="imgView">

    <image bindtap="closeExplain" mode="widthFix" class="img"

    src="../../imgs/Cancel.png"></image>

    </view>

    </view>


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^