微信小程序获取服务器图片[渲染层网络层错误]404

问题描述

小程序获取服务器图片的时候报了这个错误

检查了以下，地址没错，图片也可以显示出来，但调试器那里就是报错。重新捋了一遍发现了问题。

---

原因分析：

这是小程序加载的问题，程序运行加载到以下标签的时候，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，这样才加载图片。然后报错问题就解决了。