0

I want to use an image as a cursor in my vue app. I tried to do it as below:

<template>
  <v-app
    :style="{
      cursor:
        'url(' + require('@/assets/images/custom_cursor.png') + ')'
    }"
  >

When I write backgroundImage instead of cursor, the url works.

When I write 'circle' instead of url link for cursor, it also works.

But when I use the url for the cursor, it doesn't work.

Can anybody please help? I use Vuetify as a css framework by the way.

Note: I will make a dynamic class out of it using computed but I should figure out how to call an image as a cursor. My guess is that vuetify doesn't let an image through url overwrite the default cursor.

fiona
  • 31
  • 4
  • please check this https://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors – Boussadjra Brahim May 12 '21 at 16:21
  • @BoussadjraBrahim doesn't seem like a duplicate to me. Looks like this problem is related to webpack require call as the provided code should work AFAIK. – Heniker May 12 '21 at 16:24

1 Answers1

0

This is my first response so here goes nothing!

cursor:
    url(' + require('@/assets/images/custom_cursor.png') + ')
}"

Maybe removing the tick marks before and after the url?

Jacob
  • 9
  • 3
  • Welcome to Stack Overflow. Please try to provide an explanation as to why so people in the future can also reference this and understand why in the future. – PerplexingParadox May 12 '21 at 21:03