el-select如何插入图片

在 el-select 中插入图片的方法如下：

1. 在 el-select 中使用 v-for 循环渲染选项，并使用 el-option 组件来定义选项。

2. 使用 el-option 组件的 label 属性来指定选项显示的文本，使用 el-option 组件的 icon 属性来指定选项前面显示的图片。

示例代码如下：

<el-select v-model="selectedOption">
  <el-option
    v-for="option in options"
    :key="option.value"
    :label="option.label"
    :icon="option.icon"
    :value="option.value">
  </el-option>
</el-select>

其中 options 数组的元素如下：

{
  value: '1',
  label: '选项1',
  icon: 'el-icon-picture'
},
{
  value: '2',
  label: '选项2',
  icon: 'el-icon-picture-outline'
}

在这个例子中，el-select 会显示两个选项，分别是“选项1”和“选项2”，并在选项前面显示对应的图片。

注意：图片的路径应该使用绝对路径，否则可能无法正常显示。

相关问题

el-select选项内容为图片，点击图片会跳转

您可以使用 `el-option` 中的 `label` 属性来设置选项的显示内容，然后在 `label` 中插入一个 `a` 标签，该标签的 `href` 属性指向您要跳转的链接，如下所示：

<el-select v-model="value">
  <el-option label="<a href='https://example.com'><img src='image.png' /></a>"></el-option>
</el-select>

这样就可以在选项中显示图片，并且点击图片时会跳转到指定链接。需要注意的是，在 `label` 属性中使用 HTML 代码时，需要将其设置为字符串形式。

el-select下拉列表选项内容为两张图片，点击图片会跳转指定页面

您可以在 `el-option` 中使用 `template` 来自定义选项的显示内容，然后在模板中插入两个 `img` 标签，分别对应两张图片，并分别设置 `click` 事件绑定到不同的跳转链接，如下所示：

<el-select v-model="value">
  <el-option>
    <template v-slot:default>
      <div>
        <a href="https://example.com/page1">
          <img src="image1.png" @click.stop />
        </a>
        <a href="https://example.com/page2">
          <img src="image2.png" @click.stop />
        </a>
      </div>
    </template>
  </el-option>
</el-select>

这样就可以在下拉列表中显示两张图片，并且点击不同的图片会跳转到不同的页面。需要注意的是，使用 `@click.stop` 可以阻止点击事件冒泡，避免触发 `el-select` 的选中事件。