I'm trying to make my image draggable in another application like google or another site would do. For example if I drop an image from google to a Word document, it will copy the link of it and some web applications would show the image instead; the behavior depends on the app. But the problem is my v-img doesn't even print the link, it just does nothing.
Here is my code:
<v-card v-if="chunk.length >= i">
<template v-if="activeTab === 'Comments'">
<v-card-title >{{ chunk[i-1] }}</v-card-title>
</template>
<template v-else-if="activeTab === 'Images'">
<v-img
:src="getImgUrl(chunk[i-1])"
width="500"
contain
draggable="true"
/>
</template>
<v-card-actions>
<v-col>
<v-btn
color="#138ed3"
block
dark
>
Share
</v-btn>
</v-col>
<v-col>
<v-btn
color="#ffcd00"
block
dark
>
Save
</v-btn>
</v-col>
</v-card-actions>
</v-card>
As you can see I already tried the "draggable" option but it doesn't help.
Is there something I'm missing ?
CodePudding user response:
The problem with v-img
is that it renders the image as background (using the CSS style background-image
) rather than as an IMG tag. Apparently, CSS backgrounds do not support dragging.