vue级联选择器中插入图片

在Vue的级联选择器中插入图片可以通过使用CSS样式来实现。你可以根据级联选择器的选项值绑定一个属性，然后使用该属性来设置背景图片。

以下是一个示例代码：

<template>
  <div>
    <select v-model="selectedOption1" @change="updateSelectedOption2">
      <option value="">请选择</option>
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
    </select>

    <select v-model="selectedOption2">
      <option value="">请选择</option>
      <option v-for="option in options[selectedOption1]" :value="option.value">
        {{ option.label }}
      </option>
    </select>

    <div class="image-container" :style="{ backgroundImage: 'url(' + selectedImage + ')' }"></div>
 </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption1: '',
      selectedOption2: '',
      options: {
        option1: [
          { value: 'image1.jpg', label: '图片1' },
          { value: 'image2.jpg', label: '图片2' },
        ],
        option2: [
          { value: 'image3.jpg', label: '图片3' },
          { value: 'image4.jpg', label: '图片4' },
        ],
      },
    };
  },
  computed: {
    selectedImage() {
      const option = this.options[this.selectedOption1].find(
        (o) => o.value === this.selectedOption2
      );
      return option ? option.value : '';
    },
  },
  methods: {
    updateSelectedOption2() {
      this.selectedOption2 = '';
    },
  },
};
</script>

<style>
.image-container {
  width: 200px;
  height: 200px;
  background-size: cover;
  background-position: center;
}
</style>

在这个示例中，我们使用了两个`<select>`元素来实现级联选择器。当第一个选择器的值改变时，我们通过`@change`事件调用`updateSelectedOption2`方法来重置第二个选择器的值。根据选中的选项，我们绑定了一个`selectedImage`计算属性来获取对应的图片路径。最后，我们使用CSS中的`backgroundImage`属性将选中的图片作为背景图片显示在一个具有固定宽度和高度的容器中。

你可以根据自己的需求修改示例代码，并将图片路径替换为你自己的图片路径。