主要問題：
img地址拼接不顯示圖片
0. 其它
上一篇：Leafletjs--點、線宣肚、多邊形的繪制
鏈接：Img在js中動態(tài)賦值src屬性悠栓，加載不到圖片
1. 引發(fā)的問題
- 這個關于拼接的問題事由另一個需求引起
- 需求是：在
select下拉中，為每一項選項附上相應的圖片
本來以為是非常簡單的需求笙瑟，當時想象的不就是在
option里面加個img標簽嗎，不要太簡單鸠蚪，做了之后才發(fā)現(xiàn)option中竟然不可以加任何的其它元素师溅，也是基礎不到位，當時我就蒙了蘸鲸，經過一番的查找窿锉，找了一些解決方案嗡载，其實效果并不是太好……
-
效果
效果.png(已經和開始的需求完全不一樣了……)
然后我就想，沒有別的解決方法了嗎埂息？
主流的解決方法是：用其他標簽元素加上
css控制來模擬select的效果在 vue 中有沒有好的解決方法遥巴？
還真的有，下面的就是
iview里面的組件修改實現(xiàn)拾弃，已經完全符合一開始的需求效果了摆霉。
iview組件修改效果.png
2. vue中dom拼接
-
vue中的字符串拼接與普通的字符串拼接模式有些區(qū)別携栋，需要在引號中再嵌套引號 - 例子
// 例子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. 修改
可以看到上面組件與我需要的效果還是有區(qū)別的刻两，但是在結構上已經是對的了
疑問：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數(shù)據(jù)去循環(huán)渲染出來 - 分了兩種為 本地圖片渲染 和 網絡圖片渲染
// 一開始我的方法,無效皆疹，圖片加載不出來
<!-- <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個問題折汞。
點個贊唄盖腿！
