img标签地址src路径拼接_微信小程序中image组件src路径拼接字符串的问题

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

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

index.js文件中

onLoad: function () {

this.setData({

imgurl:app.globalData.imgurl

})

}

index.wxml文件中

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

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

2.可以在标签中做判断

我选择的是第一种，然后完美解决了，没有报错了。

接下来简要说一下为什么会报错：

看一下报错信息，说本地不存在images/2020/03/26%2021:24:17/158522905776945.png .png这个文件。也就是说页面在执行onLoad之前就已经渲染了，这个时候imgurl值为空字符串，image的src拿到的图片链接就是/images/2020/03/26%2021:24:17/158522905776945.png ，image标签就以为这是本地图片导致的。