Evgeny
Evgeny

Reputation: 31

V-img in Vue (Vuetify) don't realised in browser contex menu as image

I use Vuetify framework and create v-img element. When I open contex menu in browser there isn't ordinary image options (Save as, Open image, Copy image). I check it on Firefox and Chrome. How can I fix it? I need to add abilities to save images from page.

Vue 2.6.12, Vuetify 2.3.10

My code snippet:

<template>
   <v-img
      :src="imageSrc"
      :alt="imageAlt"
      :width="imageWidth"
      :min-height="imageMinHeight"
      contain
   >
     <template v-slot:placeholder>
       <v-row
         class="fill-height ma-0"
         align="center"
         justify="center"
       >
         <v-progress-circular
           indeterminate
           color="blue-grey lighten-3"
         ></v-progress-circular>
       </v-row>
     </template>
   </v-img>
</template>

The src of image is an url.

Upvotes: 1

Views: 251

Answers (1)

Evgeny
Evgeny

Reputation: 31

I resolve my issue with default slot of v-img. I put <img> with zero opacity to that slot. So it detected as ordinary image by browser.

My example:

<template>
   <v-img
      :src="imageSrc"
      :alt="imageAlt"
      :width="imageWidth"
      :height="imageHeight"
      contain
   >
     <template v-slot:default>
       <div class="d-flex flex-row">
         <v-spacer/>
           <img
             :src="imageSrc"
             :height="imageHeight"
             align="center"
             class="opacity-0"
           >
          <v-spacer/>
        </div>
     </template>

     <template v-slot:placeholder>
       <v-row
         class="fill-height ma-0"
         align="center"
         justify="center"
       >
         <v-progress-circular
           indeterminate
           color="blue-grey lighten-3"
         ></v-progress-circular>
       </v-row>
     </template>
   </v-img>
</template>

css:

.opacity-0 {
  opacity: 0 !important;
}

Upvotes: 1

Related Questions