vue的 v-for 循环中图片加载路径问题

  先看一下产品需求,如下图所示,

vue的 v-for 循环中图片加载路径问题

  产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台。当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了。

  首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了。数据结构如下:映射关系用对象表示,多个图片,所以放到一个数组中

[ { CnName:\'荷花\', EnName: \'lotus\' }, { CnName:\'康乃馨\', EnName: \'carnations\' }, { CnName:\'牡丹\', EnName: \'peony\' } ]

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgdysf.html