小程序中如何拼接图片地址

需求描述：当我们渲染一些图片信息时，通常后端接口返回给我们的地址信息只有后面半截，需要前端拼接前缀后，才能正确的显示处理。

wxml 中无法像 HTML 直接使用较高级的 JS 语法，如‘.toFixed’，‘toString()’，但可以通过引入wxs模块实现效果。

// import { config  } from '../config/config.js'var filters = {toFix: function (value) {return value.split(',')},splitFile: function(value) {// return config.file_base_url + valuereturn 'http://139.159.220.199:8082/' + value}
}
module.exports = {toFix: filters.toFix,splitFile: filters.splitFile
}

注意：拼接字符串的前缀无法从配置页面中引用过来。

如何使用呢？

<wxs module="filters" src="../../../utils/filters.wxs"></wxs><image src='{{filters.splitFile(item.pictureAddress)}}' mode="aspectFill"></image>

当然我们可以将公共的前缀信息存储在 App 的 globalData 中，在页面中，可以通过 getApp().globalData.xxx 获取到全局变量存储在变量中，渲染页面时，拼接好即可。更多详情，请参考：微信小程序拼接图片链接无底洞深入探究

小程序中如何拼接图片地址相关推荐

php地址选择插件,微信小程序中关于三级联动地址选择器的实例分享
本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人 ...
如何在微信小程序中集成认证服务—邮箱地址篇
近期华为AppGallary Connect的认证服务SDK新增支持了微信小程序.今天就来教大家如何在微信小程序中集成认证服务的邮箱地址认证方式 1.安装微信小程序环境首先进入微信小程序官网下载微信 ...
微信小程序中如何将图片铺满屏幕，作为背景图片
背景图片的制作我相信有很多人和我一样,在制作背景图片是遇到了困难,比如图片为何显示扭曲,不是按给与图片大小显示的,又比如为何图片无法置顶显示,而是有一定的空间隔开等,在此我会演示如何制作一个背景图片 ...
微信小程序中处理获取用户地址的回调
handleChooseAddress () {// 选择用户地址,初次调用该方法会弹出授权窗口,授权信息会被保存到 scope.address 属性中// 如果用户点击的是[取消],scope.ad ...
微信小程序中的添加收获地址的流程
1.添加收获地址的解析 1.首先我们要给添加收获地址设置点击事件2.然后在通过微信官方文档给我们提供的一个方法来进行添加本地存储3.判断本地里面是否有存在的内容,如果有的话显示内容,如果没有那么就显示 ...
微信小程序中 canvas 导出图片为黑色
今天写分享二维码时出现的坑,看见黑底时心都凉了半截,官方的说法是安卓中会把透明的底色绘制成黑色,所以解决方法是直接绘制一个底色就行了 ctx.setFillStyle("#fff" ...
如何在微信小程序中下载APP？
如何在微信小程序中下载APP? 可能的方案官方api接口:--目前小程序官方未提供专门下载APP的接口:小程序目前是不允许将流量导出到APP之外,所以合理推断,该方案短期内并不可行. 通过web-v ...
在微信小程序中如何下载APP？
关注小编微信公众号公众号[前端基础教程从0开始]回复"1",拉你进程序员技术讨论群,群内有大神,可以免费提供问题解答.公众号回复"小程序",领取300个优秀的小 ...
微信小程序中background-attachment:fixed兼容问题
前提在微信小程序的页面中使用了background-attachment:fixed;属性,在安卓机型中适用,但在苹果机型中失效了,导致背景图样式没有固定. 原因固定背景导致重绘的成本很高,在苹果 ...

小程序中如何拼接图片地址

小程序中如何拼接图片地址相关推荐

最新文章

热门文章