[Vuejs]-How can i put the icon on the top left inside of the image. Vue / CSS

by

3👍

✅

This is not a vue specific requirement. It’s just plain CSS.

You need to place your button ( the delete icon ) absolute relative to the wrapper ( that contains the image and button )

See below example

.wrapper {
    position:relative
}
button {
   position:absolute;
   top:0;
   left:0;
}
<div class="wrapper">
   <img src="https://via.placeholder.com/150" />
   <button>
      Delete
   </button>
</div>
👤Mihai T

1👍

One simple way to do this is absolute positioning in CSS. This is an example with TailwindCSS (follow this link for reproduction):

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

So your code should be adjusted to:

<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>

You can feel free to adjust the css properties top, bottom, left, and right to fit your needs.

👤FloWy

Leave a comment