用vue写一个img标签图片 在左上角有一个标签的组件

你可以使用Vue的单文件组件来实现这个功能。具体步骤如下：

1. 在`<template>`标签中，使用`<img>`标签来显示图片，并将图片的路径绑定到`src`属性上。

2. 在`<template>`标签中，使用`<div>`标签来作为标签的容器，并设置其样式为`position:absolute`，使其脱离文档流并可以与图片重叠。

3. 在`<template>`标签中，使用`<slot>`标签来作为插槽，用于显示标签的内容。

4. 在`<script>`标签中，定义一个名为`ImageWithLabel`的Vue组件，并在其中声明一个名为`props`的属性，用于接收外部传入的图片路径。

5. 在`<script>`标签中，定义`data`对象，并在其中声明一个名为`showLabel`的属性，用来控制标签是否显示。

6. 在`<script>`标签中，定义`methods`对象，并在其中声明一个名为`toggleLabel`的方法，用来切换标签的显示状态。

7. 在`<style>`标签中，定义标签容器的样式，并设置其`z-index`属性为比图片更大的值，以确保标签在图片上方显示。

下面是一个示例代码：

<template>
  <div style="position:relative;">
    <img :src="imageUrl" alt="Image" />
    <div v-if="showLabel" style="position:absolute;top:0;left:0;background-color:red;color:white;padding:5px;z-index:1;">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imageUrl: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      showLabel: false
    }
  },
  methods: {
    toggleLabel() {
      this.showLabel = !this.showLabel;
    }
  }
};
</script>

<style scoped>
div {
  border: 1px solid black;
}
</style>

你可以在父组件中使用该组件，并传入图片路径和标签内容，如下所示：

<template>
  <div>
    <image-with-label :image-url="imagePath" @click="toggleLabel">
      {{ label }}
    </image-with-label>
  </div>
</template>

<script>
import ImageWithLabel from "@/components/ImageWithLabel.vue";

export default {
  components: {
    ImageWithLabel
  },
  data() {
    return {
      imagePath: "https://example.com/image.jpg",
      label: "New!",
    };
  },
  methods: {
    toggleLabel() {
      this.$refs.imageWithLabel.toggleLabel();
    }
  }
};
</script>

在上面的代码中，`ImageWithLabel`组件被引入并注册为子组件，然后在模板中使用，并传入`imagePath`和`label`属性。点击图片时，调用`toggleLabel`方法来切换标签的显示状态。