How to add image into v-text-field?-CodePudding

I have been trying to add image inside v-text-field, but it is causing an issue when I add it moves label to a bit of right side?

<v-text-field
  ref="phone"
  v-model="phone"
  dense
  outlined
  disabled
  color="black"
  :rule="[requiredRule]"
  :label="$t('10')"
  >
    <template #prepend-inner>
      <v-img style="margin: auto 0" max-height="25" max-width="30" src="/images/KW.png"> </v-img>
    </template>
</v-text-field>

as you can see label PHONE moves to right side it isn't staying on its place, I tried to add margin-top but didn't fix it.

CodePudding user response：

This looks like an undocumented feature, which explains why the behaviour may be unexpected.

The cause of the seems to me is that the input calculates the width of the slot content at the time of rendering, which due to a race condition may resolve before or after the image is rendered. That's why if you render multiple times, you may not always see it behaving this way.

To get around it, I thing you should be able to wrap the image with another element of fixed width. (<div style="width:30px">)

<v-text-field
  ref="phone"
  v-model="phone"
  dense
  outlined
  label="My Label"
>
  <template #prepend-inner>
    <div style="width:30px">
      <v-img style="margin: auto 0" max-height="25" max-width="30" src="/images/KW.png"/>
    </div>
  </template>
</v-text-field>