iview组件 里的select option里添加图片

在iview（一款基于Vue.js的前端UI框架）中的Select组件中，如果你想在option中添加图片，可以利用`<template>`选项来创建自定义渲染模板。以下是步骤：

1. 首先，确保已经安装了iview库并在项目中导入所需的组件：

<script src="https://unpkg.com/iview/dist/iview.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">

2. 然后，在你的Vue组件中使用Select，并在每个option标签内使用模板：

<template>
  <div>
    <i-select v-model="selectedOption" placeholder="请选择">
      <template v-for="(item, index) in options">
        <i-option :key="index" :value="item.value">
          <span>{{ item.label }}</span>
          <img :src="item.image" :alt="item.label" style="width: 20px; height: 20px; margin-right: 5px;">
        </i-option>
      </template>
    </i-select>
  </div>
</template>

这里，`options`是一个包含label、value以及image属性的对象数组。

3. 在你的JavaScript部分，设置数据：

export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { label: '选项1', value: 'option1', image: 'path/to/image1.png' },
        { label: '选项2', value: 'option2', image: 'path/to/image2.png' }
      ]
    };
  }
};

4. 别忘了导入Vue并实例化它：

<script>
import Vue from "vue";
new Vue({
  el: '#app',
  // ...其他配置...
});
</script>

现在Select下拉框的每个选项会显示对应的文本和图片。