Vue fancybox redirect to image url instead of opening image

Question

I am trying to use fancybox in my Vue component but when I click the thumbnail it redirects me to the image url in a new tab instead of opening it in fancybox

my code:

<a :href="image.url" class="fancybox relative w-1/3 mb-5" rel="gallery">
    <i class="icon loop"></i>
    <img :alt="image.id" :src="image.url">
</a>

image.url looks like this:

http://www.localurl/file/f376ea11-3331-4bb2-b20d-4d64e0fca154

Funny thing is when I use a random image url like this without the :href and :src it works great.

<a href="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="fancybox relative w-1/3 mb-5" rel="gallery">
    <i class="icon loop"></i>
    <img :alt="image.id" src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</a>

Answer 1

have you tried target attribute for "a" tags? it will be like:

<a href="#" target="_self" />