vue--dom中字符串拼接、img地址拼接問題

主要問題： img 地址拼接不顯示圖片

0. 其它

上一篇：Leafletjs--點、線、多邊形的繪制
鏈接：Img在js中動態賦值src屬性，加載不到圖片

1. 引發的問題

• 這個關於拼接的問題事由另一個需求引起
• 需求是：在 select 下拉中，為每一項選項附上相應的圖片

本來以為是非常簡單的需求，當時想象的不就是在 option 里面加個 img 標簽嗎，不要太簡單，做了之后才發現 option 中竟然不可以加任何的其它元素，也是基礎不到位，當時我就蒙了，經過一番的查找，找了一些解決方案，其實效果並不是太好……

• 效果
  

然后我就想，沒有別的解決方法了嗎？

主流的解決方法是：用其他標簽元素加上 css 控制來模擬 select 的效果

在 vue 中有沒有好的解決方法？

還真的有，下面的就是 iview 里面的組件修改實現，已經完全符合一開始的需求效果了。

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>

• 效果
  

4. 修改

可以看到上面組件與我需要的效果還是有區別的，但是在結構上已經是對的了
疑問：option 中不是不可以添加其它的標簽元素嗎？
扒一扒，看看它是怎么渲染的

果然，它還是用 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 個問題。