问题描述

小程序获取服务器图片的时候报了这个错误
在这里插入图片描述
检查了以下,地址没错,图片也可以显示出来,但调试器那里就是报错。重新捋了一遍发现了问题。


原因分析:

这是小程序加载的问题,程序运行加载到以下标签的时候,js文件还没获取到goodsInfo。所以这个时候图片的地址还是空的,所以会报错。解决方法也很简单,在获取goodsInfo之前不加载这个image就行了。

    <image src="{{imgUrl+goodsInfo.res_photo}}"></image>

解决方案:

html文件做一些修改

 <image src="{{imgUrl+goodsInfo.res_photo}}" wx:if="{{condition}}"></image>

这里加入wx.if 绑定的condition是data中定义的boolean值,初始值为false。

  onLoad(options) {
    // 获取页面需要货物信息
    getGoodsInfo: {
      wx.request({
        url: Url + findResourcesById,
        data: {
          id: this.data.goodsId
        },
        success: (res) => {
          // 获取搜索到的货物的信息
          this.setData({
            goodsInfo: res.data,
            condition:true
          })
        }
      })
    }
  }

我这里是在页面加载的时候获得图片信息的,在赋值的时候给data中的时候将condition改为true。
这样,程序加载的时候发现里面的condition为false就不会加载图片,而在js文件获取到图片信息并赋值之后再将condition改为true,这样才加载图片。然后报错问题就解决了。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐