vue--dom中字符串拼接、img地址拼接问题

主要问题：img 地址拼接不显示图片

0. 其它

上一篇：Leafletjs--点、线、多边形的绘制
链接：Img在js中动态赋值src属性，加载不到图片

1. 引发的问题

• 这个关于拼接的问题事由另一个需求引起
• 需求是：在 select 下拉中，为每一项选项附上相应的图片

本来以为是非常简单的需求，当时想象的不就是在 option 里面加个 img 标签吗，不要太简单，做了之后才发现 option 中竟然不可以加任何的其它元素，也是基础不到位，当时我就蒙了，经过一番的查找，找了一些解决方案，其实效果并不是太好……

• 效果

  
  
  效果.png(已经和开始的需求完全不一样了……)

然后我就想，没有别的解决方法了吗？

主流的解决方法是：用其他标签元素加上 css 控制来模拟 select 的效果

在 vue 中有没有好的解决方法？

还真的有，下面的就是 iview 里面的组件修改实现，已经完全符合一开始的需求效果了。

iview组件修改效果.png

2. vue中dom拼接

• vue 中的字符串拼接与普通的字符串拼接模式有些区别，需要在引号中再嵌套引号
• 例子

// 例子1


// 例子2

3. 引用

• iview 的引用照着官网引用一下就可以了
• 引用组件

• 效果

  
  
  组件效果.png

4. 修改

可以看到上面组件与我需要的效果还是有区别的，但是在结构上已经是对的了
疑问：option 中不是不可以添加其它的标签元素吗？
扒一扒，看看它是怎么渲染的

渲染.png

果然，它还是用 ul > li 模拟出来的，这下子明白了

• 简单研究了一下后，可以完全按照自己的需求来改

5. 衍生问题，图片不显示问题

• 换成 data 数据去循环渲染出来
• 分了两种为 本地图片渲染 和 网络图片渲染

// 一开始我的方法,无效，图片加载不出来


// 最终修改，正常加载


 // 网络图片，这样就可以正常显示

• 为什么需要 require ？

不用 require ，路径会被加载器解析为字符串，所以图片找不到

• 最后

6. 结束

问题不大，但是最后相当于解决了 2~3 个问题。

点个赞呗！