主要问题：
img地址拼接不显示图片
0. 其它
上一篇：Leafletjs--点、线、多边形的绘制
链接：Img在js中动态赋值src属性，加载不到图片
1. 引发的问题
- 这个关于拼接的问题事由另一个需求引起
- 需求是：在
select下拉中，为每一项选项附上相应的图片
本来以为是非常简单的需求，当时想象的不就是在
option里面加个img标签吗，不要太简单，做了之后才发现option中竟然不可以加任何的其它元素，也是基础不到位，当时我就蒙了，经过一番的查找，找了一些解决方案，其实效果并不是太好……
-
效果
效果.png(已经和开始的需求完全不一样了……)
然后我就想，没有别的解决方法了吗？
主流的解决方法是：用其他标签元素加上
css控制来模拟select的效果在 vue 中有没有好的解决方法？
还真的有，下面的就是
iview里面的组件修改实现，已经完全符合一开始的需求效果了。
iview组件修改效果.png
2. vue中dom拼接
-
vue中的字符串拼接与普通的字符串拼接模式有些区别，需要在引号中再嵌套引号 - 例子
// 例子1
<a v-bind:href="'/forum/list/?id=' + id" >
// 例子2
<img :src="`https://.../assets/${ss[1]}.svg`" alt="" />
3. 引用
-
iview的引用照着官网引用一下就可以了 - 引用组件
<template>
<Select v-model="model9" style="width:200px">
<Option value="New York" label="New York">
<span>New York</span>
<span style="float:right;color:#ccc">America</span>
</Option>
</Select>
</template>
<script>
export default {
data () {
return {
model9: ''
}
}
}
</script>
-
效果
组件效果.png
4. 修改
可以看到上面组件与我需要的效果还是有区别的，但是在结构上已经是对的了
疑问：option中不是不可以添加其它的标签元素吗？
扒一扒，看看它是怎么渲染的
渲染.png
果然，它还是用ul > li模拟出来的，这下子明白了
- 简单研究了一下后，可以完全按照自己的需求来改
<template>
<div>
<Select v-model="model9" style="width:200px" >
<Option value="New York" label="New York">
<span>New York</span>
// 改成 img 就可以了
<img src="../../test.png" alt="">
</Option>
</Select>
</div>
</template>
5. 衍生问题，图片不显示问题
- 换成
data数据去循环渲染出来 - 分了两种为 本地图片渲染 和 网络图片渲染
// 一开始我的方法,无效，图片加载不出来
<!-- <img :src="`../assets/${ss[1]}.svg`" alt="" /> -->
// 最终修改，正常加载
<img :src="require(`../assets/${ss[1]}.svg`)" alt="" />
// 网络图片，这样就可以正常显示
<!-- <img :src="ss[2]" alt="" /> -->
- 为什么需要
require？不用
require，路径会被加载器解析为字符串，所以图片找不到
- 最后
<template>
<div>
<Select v-model="model9"
style="width:200px"
@on-change="getData">
<Option v-for='(ss,index) in age' :value="ss[0]" :label="ss[0]" :key= 'index'>
<span>{{ss[0]}}</span>
// 本地图片渲染
<img :src="require(`../assets/${ss[1]}.svg`)" alt="" />
// 网络图片
<!-- <img :src="ss[2]" alt="" /> -->
</Option>
</Select>
</div>
</template>
<script>
export default {
data() {
return {
model9: '',
age: {
test1:['消防箱','erwei_xiaofangshaxiang','https://timgsa.baidu.com/timg.jpg'],
test2:['出入口','xiaofanglei_anquanchukou','https://timgsa.baidu.com/timg.jpg']
}
};
},
mounted() {
this.getData();
},
methods: {
getData(obj) {
console.log(obj);
}
}
};
</script>
<style>
.ivu-select-item {
display: flex;
align-items: center;
justify-content: flex-start;
}
img {
height: 1.75rem;
width: 1.75rem;
margin-left: 0.625rem;
}
</style>
6. 结束
问题不大，但是最后相当于解决了
2~3个问题。
点个赞呗！
