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

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

0. 其它

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

1. 引发的问题

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

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

  • 效果
    vue--dom中字符串拼接、img地址拼接问题_第1张图片

然后我就想,没有别的解决方法了吗?

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

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

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

vue--dom中字符串拼接、img地址拼接问题_第2张图片

2. vue中dom拼接

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


// 例子2

3. 引用

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

4. 修改

可以看到上面组件与我需要的效果还是有区别的,但是在结构上已经是对的了
疑问:option 中不是不可以添加其它的标签元素吗?
扒一扒,看看它是怎么渲染的
vue--dom中字符串拼接、img地址拼接问题_第4张图片
果然,它还是用 ul > li 模拟出来的,这下子明白了

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

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

  • 换成 data 数据去循环渲染出来
  • 分了两种为 本地图片渲染 和 网络图片渲染
// 一开始我的方法,无效,图片加载不出来


// 最终修改,正常加载


 // 网络图片,这样就可以正常显示
  • 为什么需要 require

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

  • 最后





6. 结束

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

点个赞呗!

转载于:https://www.cnblogs.com/jry199506/p/11387761.html

你可能感兴趣的:(vue--dom中字符串拼接、img地址拼接问题)