Reputation: 31
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
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