用vue写一个img标签图片 在左上角有一个三角标签的组件，自适应父的高度

好的，以下是一个简单的实现方式：

<template>
  <div class="container">
    <div class="triangle"></div>
    <img :src="url" alt="image">
  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.container {
  position: relative;
}
.triangle {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid white;
  border-bottom: 20px solid transparent;
}
img {
  display: block;
  width: 100%;
  height: auto;
}
</style>

这个组件包含一个容器和一个img标签，容器使用`position: relative`定位，三角标签使用`position: absolute`相对于容器进行定位。img标签的高度会自适应宽度，因此可以直接设置为100%宽度。我们也可以使用`object-fit`属性来控制图片在容器中的适应方式。