Блог

я работаю над проектом vue и пытаюсь создать ряд изображений со значком и в левом верхнем углу внутри каждого изображения.

это мой код:

 <div v-for="(image, index) in images" :key="index" class="d-inline py-5 ">
    <img :src="'/product_images/' image.image_name" class="m-1 rounded-2 " alt="" style="width: 100px; height: 100px">
    <button class="btn"><i id="icon" class="bi bi-trash-fill text-danger" style="font-size: 22px"></i></button>
</div>
 

и вот что я получаю:

Это не является специфичным требованием для vue. Это просто обычный CSS.

Вам нужно разместить свой button ( значок удаления ) абсолют относительно оболочки ( которая содержит изображение и кнопку).

См. Пример ниже

 .wrapper {
    position:relative
}
button {
   position:absolute;
   top:0;
   left:0;
} 

 <div class="wrapper">
   <img src="https://via.placeholder.com/150" />
   <button>
      Delete
   </button>
</div> 

Один из простых способов сделать это-абсолютное позиционирование в CSS. Это пример с TailwindCSS (перейдите по этой ссылке для воспроизведения):

 <div class="relative">
  <img src="/img/logo.svg" class="h-7 sm:h-8" />
  <div class="absolute top-0 left-0">Icon</div>
</div>   
 

Поэтому ваш код должен быть адаптирован к:

 <div v-for="(image, index) in images" :key="index" class="d-inline py-5" style="position: relative">
    <img :src="'/product_images/' image.image_name" class="m-1 rounded-2 " alt="" style="width: 100px; height: 100px">
    <button class="btn"><i id="icon" class="bi bi-trash-fill text-danger" style="font-size: 22px; position: absolute; top: 0; left: 0"></i></button>
</div>
 

Вы можете смело настраивать свойства css top , bottom , left , и right в соответствии с вашими потребностями.