微信小程序中image组件src路径拼接字符串的问题

微信小程序中image组件src路径拼接字符串的问题

最近在做微信小程序毕设，涉及到远程图片显示，一开始我是这样写的：

index.js文件中

onLoad: function () {
	this.setData({
	       imgurl:app.globalData.imgurl
	})
}     

index.wxml文件中

  <!-- imgurl是上面setData获得的，是我的服务器的地址，后面 item.imageUrl是具体某一张图片的地址，我想把它们拼接到一块
  用过src="{{imgurl }}" + "{{item.imageUrl}}" 各种都尝试过，但是都不行 -->
<image src="{{imgurl + item.imageUrl}}" mode="aspectFill" />

但是控制台老是报错说找不到本地图片：

VM12083:1 Failed to load local image resource /pages/index/index/images/2020/03/26%2021:24:17/158522905776945.png 
 the server responded with a status of 500 (HTTP/1.1 500 Internal Server Error) 

先说解决方法：
1.可以在imgurl初始化的时候就赋值
index.js

data: {
   imgurl: getApp().globalData.imgurl
}

index.wxml

<image src="{{imgurl + item.imageUrl}}" mode="aspectFill" />

2.可以在标签中做判断

<image src="{{imgurl ? imgurl +  item.imageUrl: ' '}}" mode="aspectFit"></image>

我选择的是第一种，然后完美解决了，没有报错了。
接下来简要说一下为什么会报错：
看一下报错信息，说本地不存在images/2020/03/26%2021:24:17/158522905776945.png .png这个文件。也就是说页面在执行onLoad之前就已经渲染了，这个时候imgurl值为空字符串，image的src拿到的图片链接就是/images/2020/03/26%2021:24:17/158522905776945.png ，image标签就以为这是本地图片导致的。