image标签src绑定为变量,且请求的是服务器处理图片时(地址后加指令行)报错500的bug及解决方法--uniapp开发的奇妙小骚话
首先说一下前提:我是拿uniapp开发的微信小程序,这个bug感觉应该是uniapp 编译时出现的问题。
直接上图:
以防图裂,这里po出代码:
<image :src="`${goods_info.imagepath}?x-oss-process=image/resize,m_lfit`" ></image>
这里是今天新加的代码,后端同事说图片地址加上'x-oss-process=image/resize',请求的图片资源能裁剪压缩。(虽然以前用过这种方式压缩请求的资源,但是忘了一干净)
于是头一热直接在绑定变量后拼接字符串,于是报了下面的bug:
Failed to load local image resource /shopping_packet/pages/goods_detail_page/
the server responded with a status of 500
突然就500了就很酸爽。
虽然报错了,但是页面还是渲染出来了,没有任何显示及功能上的问题。所以我把这个bug定义为小bug
而且看起来跟我刚改的代码没太大关系,毕竟直接请求了个什么undefined的资源,500就可以理解。
但是本着严谨的态度,我还是找了一下这个bug的来源和解决方法。
看了一下渲染好的图片地址,地址没错,而且加上了阿里服务器处理资源的后缀,大概如下:
https://shangyounth.oss-accelerate.aliyuncs.com/xxxx.com/goods/3Kb7GNWGTB8yRyJFbErk.jpg?x-oss-process=image/resize,m_lfit,w_375
说明拼接这个操作和渲染是没问题的。
那问题有可能出在uniapp编译成小程序时底层操作了。
虽然这样怀疑了,但是我又懒,不想找底层代码看。所以直接解决就好了。
直接写个方法:
handle_image_path(path){
return path+'?x-oss-process=image/resize,m_lfit,w_375';
}
在请求到数据后把图片地址放进这个函数里处理一下,渲染时候直接拿到处理好的地址,不在标签里进行拼接了
于是bug解决了!yeah~
回过头来想想,直接在标签的绑定数据上进行拼接操作的确有违面向对象编程逻辑的,所以这个小bug有大部分自身原因在吧
如果以上过程中有问题,欢迎大神指正。